Grid Layout

CodeSandbox link

You can find the full code for this tutorial at https://codesandbox.io/s/grid-layout-l472n.

Layout

The first method we tried was tables, positioning, and inline-block, but all of these methods were essentially hacks, leaving out a lot of important functionality. Flexbox is also a very good layout tool, but it is one-directional. We've had to hack our way around layout problems for as long as we've been building websites, so Grid was the first module created specifically to fix them.

Display

A container element must be defined as a grid.

display: grid;

Template

Columns and rows of the grid are defined by space-separated values. The value can be a length, a percentage or a fraction.

grid-template-columns: ...  ...;

grid-template-rows: ... ...;

Spacing

Sets the grid line size. This is similar to setting the gutter width between columns/rows.

column-gap: 20x;
row-gap: 20x;
gap: 20px;

Container

Let's resize the browser container and you can see that it takes up the entire width of the browser. You should normally set a maximum size for your container so that it will adapt to all screen sizes.

max-width: 1200px;
margin: 0 auto;

Justify Content

This property sets how the grid will be aligned within the grid container horizontally.

• start – aligns the grid to the left
• end – aligns the grid to the right
• center – aligns the grid in the center
• space-evenly – places an even amount of space between each grid item, including the far ends
• space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between – places an even amount of space between each grid item, with no space at the far ends

Align Content

This property sets how the grid will be aligned within the grid container vertically.

• start – aligns the grid to the top
• end – aligns the grid to the bottom
• center – aligns the grid in the center
• space-evenly – places an even amount of space between each grid item, including the far ends
• space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between – places an even amount of space between each grid item, with no space at the far ends

Place Content

Using place-content will shorten your code. The first value is align-content, while the second value is justify-content.

place-content: center space-between;

Justify Items

This property sets how the items will be aligned within the grid horizontally.

• start – aligns the item to the left
• end – aligns the item to the right
• center – aligns the item to the center

Align Items

This property sets how the items will be aligned within the grid vertically.

• start – aligns the item to the top
• end – aligns the item to the bottom
• center – aligns the item to the center

Place Items

Using place-items will shorten your code. The first value is align-items, while the second value is justify-items.

place-items: center;

Responsive Columns

Let's adapt the grid now that you know how it works.

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));