To create this grid we need to use grid-template-columns and grid-gap .

Grid-template-columns declare how the columns of a grid will be laid out, it take a series of values separated by spaces, that declare the size of each column; the number of values specified give us the number of columns.

For example, a four column grid of 250px wide columns can be expressed like this:

grid-template-columns: 250px 250px 250px 250px;

That same layout can also be expressed with a handy repeat keyword.

grid-template-columns: repeat(4, 250px);

Defining gutters

Grid-gap specifies the size of gutters in grid layout, it can accept one or two values, if you specify two values you are defining both the row and the column’s gutter size.

In our split two-column layout example we might declare our grid like this:

.grid {

display: grid;

grid-template-columns: 50vw 50vw;

grid-gap: 1rem;

}

Unfortunately, the gap will be added to the overall width of the containing element making the calculation 100vw + 1rem, and the layout will end up with a horizontal scroll-bar.

Horizontal scrollbar from using grid gap with viewport units

In order to fix this space overflow, we need a slightly different solution. Enter the fraction unit or FR.

The fraction unit

A fraction unit takes up a share of available space; if 900px was the available space, and one element had one fraction, and another had two fractions — the first would get 1/3 and the second would get 2/3 of that 900px.

Revising our new code with fractions replacing the view-port units:

.grid {

display: grid;

grid-template-columns: 1fr 1fr;

grid-gap: 1rem;

}

Aligning the content

To align the content in our example, we declare grid on the child elements and use the alignment properties to position them on their track; a track is just a generic name for something that is a grid column or row (there are also grid lines which surround them). Grid, like Flexbox, has a series of alignment properties — four values — start, center, end, and stretch which relate to where the children are on their appropriate track. Stretch, unlike the others, will pull the element from the start to the end of that track.

align-items and justify-content

In our example, to get the content to center both vertically and horizontally we can apply these properties on the container:

.center-content {

display: grid;

align-items: center;

justify-content: center;

}

[2 column demo]

Recreating the two column layout with legacy grid

To recreate the layout with legacy grid, we have to consider many of the limitations in the implementation. Not only does grid-gap not exist in legacy grid, you must declare on each grid item where that grid item starts, otherwise it defaults to 1, meaning all of the grid children will stack on the first column.

The legacy version of this layout has to handle the lack of the gap feature by adding the gap as its own grid track, and also include where each item starts:

.grid-legacy {

display: -ms-grid;

-ms-grid-columns: 1fr 1rem 1fr; // gap replacement

} .grid-legacy:first-child {

-ms-grid-column: 1;

} .grid-legacy:last-child {

-ms-grid-column: 3;

}

Approaching alignment, and full height in legacy grid

Legacy grid has a similar problem to Flexbox in IE11, setting min-height on the container won’t necessarily be honored. This problem is much easier to work around with Grid.

To do this we can use the minmax function on the parent container’s row, minmax specifies a range of the largest and smallest values a row or column could be.

-ms-grid-rows: minmax(100vh, 1fr);

On the child items we can declare grid and set a single column and row of 1fr.

.ms-cell {

-ms-grid-columns: 1fr;

-ms-grid-rows: 1fr;

}

Lastly, because we can’t align from the parent like Flexbox, or modern Grid, we have to use the elements themselves to align.

.ms-align-center {

-ms-grid-column: 1;

-ms-grid-column-align: center; // like align-self in modern grid

-ms-grid-row-align: center; // like justify-self in modern grid

}

[Legacy 2 column demo]

So far we’ve covered how to create columns, gutters, align content, and how we could support legacy grid. Let’s experiment with how to create negative space with grid.

Creating negative space with CSS Grid