Getting Off The Ground With CSS Grid

Here’s what is a pretty simple design but what if you wanted to change the layout on desktop to this.

We’re now moving the social icons below our hero image and switching them to align vertically. This is something I see all the time on sites.

There’s a couple approaches we could take:

You could actually duplicate the markup for the social share and have it both above the hero styling it horizontally and below the hero styling it vertically and then, depending on the breakpoint, display the version you want. This is just a hack though.
You could also use JavaScript to append the social share in the different areas.
Or you could use flexbox which would be complicated, but you could do it.

This is where Grid comes in. It is extremely possible and very simple to do this in Grid. I’m going to go through the basics of Grid and then, at the end, we’ll come back and I’ll show you how to do this layout.

If you want some margin in-between your grid cells all you have to do is add the grid-gap property and define how much space you want.

I absolutely love grid-gap because when you add margins to flexbox it adds margins AROUND each item and then sometimes you have to go to the container and set a negative margin to offset the margin on your items and it’s a big mess sometimes.

With Grid, it only sets the gap in-between each track. The grid-gap property also supports just calling it “gap” as well. This is a new proposal that looks like it has gone into effect across all the major browsers. I usually default to grid-gap since I like that you can quickly point out in your CSS what’s happening with grid since those properties are typically prefaced by “grid-”

First of all, flexbox is one-dimensional — altering either the column OR row, not both. It’s generally geared towards content first and it’s great for components that are typically more linear and small scale layouts.

On the other hand grid is two-dimensional — altering both columns AND rows. It takes a layout first approach and is intended for larger scale layouts.

So when should you use one or the other? If you’re looking at a design and only need to define the layout as a row or column then reach for Flexbox but if you want to define a grid and fit the content into two dimensions then you need grid.

Lately, I’ve been reaching for Grid more. Although it’s intended for two-dimensional layouts it also excels at one-dimensional especially if you come back later and decide that you want to make the layout multi-dimensional.