CSS Grid Layout

CSS Grid allows us to create 2 dimension layouts and align items in columns and rows.

All browsers support grid layout.

Flexbox vs. Grid

First, I will create a div with the class grid. In order to use the grid layout, I will set the div’s display to grid in my CSS. Put some child elements within this container div with class grid in order to see its default behavior.

.grid {
   display: grid
}

After you set display: grid, you notice nothing really changes. We will have to define other CSS properties in order to see the effects of CSS grid.

.grid {
   display: grid
   grid-template-columns: 40% 60%;
}

This grid-template-columns property will actually cause things to change. If you have two child elements of the grid-display div, the first one will take up 40% of the available space and the second will take 50%. If you have more than two, the third, fourth, fifth, etc. will follow this same pattern, wrapping to the next line as necessary.

grid-template-columns: 40% 30% 30%;

You can add as many percentages as you like, as long as they add up to 100%. For each percentage, a new column will be placed onto the each line.

grid-column-gap: 1em;
grid-row-gap: 1em;

The grid-column-gap property adds spacing between each column (on the same line). The grid-row-gap property adds spacing between each row (between 2 lines). The grid-gap property will add the same amount of spacing to both rows and columns.

The recommended unit when using the grid-template-columns property is fractions.

This line, for example, separates the layout into 3 equal-sized columns– 1/3 each.

grid-template-columns: 1fr 1fr 1fr;

This line separates the layout into 1/4, 1/2, then 1/4 of the available width.

grid-template-columns: 1fr 2fr 1fr;

In order to make the syntax more succinct, you can write repeating template column layouts like this:

grid-template-columns: repeat(3, 1fr);

The above line does the same as 1fr 1fr 1fr. The below line repeats 1fr, 2fr, 1fr, 2fr, etc. four times.

grid-template-columns: repeat(3, 1fr, 2fr);

This line sets the height for every grid cell:

grid-auto-rows: 100px;

This line makes the default cell height 100px but expands a cell (and the other cells on its line) if the cell’s content requires more room:

grid-auto-rows: minmax(100px, auto);

The justify-items property allows you to define the location of grid cells within their defined space along the primary axis. It’s very similar to the justify property in Flexbox.

This is the default value of the justify-items property. It makes cells take up their entire horizontal space (in a horizontal grid).

justify-items: stretch

Some other property value options:

justify-items: start;  
justify-items: end;
justify-items: center;

The align-items property allows you to define the location of grid cells within their defined space along the cross axis. It’s very similar to the align property in Flexbox.

This is the default value of the align-items property. It makes cells take up their entire vertical space (in a horizontal grid).

align-items: stretch

Some other options for the property value:

justify-items: start;
justify-items: end;
justify-items: center;

You can set the justify and align properties of each individual grid element in order to only affect that element.

The grid-column and grid-row properties allow you to expand the amount of cell spaces that an individual cell takes up. These properties do this by using a property called lines.

Lines are the spaces between cells.

This line will make Cell 1 expand from row lines 1-3 (vertical expansion).

.cell1 {
   grid-row: 1/3;
}