CSS Part 6: Page layouts with grid

Flexbox handles one direction. Grid handles two, rows and columns at the same time, which makes it the tool for card layouts and whole-page layouts.

A three-column grid

.projects {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 20px;}

Like flexbox, grid goes on the parent, and its direct children become the grid items. Each child fills the next cell, left to right, then a new row starts.

fr means a fraction of the free space. 1fr 1fr 1fr gives three equal columns. 2fr 1fr gives a wide column and a narrow one, two thirds and one third. You can mix units too: 250px 1fr makes a fixed 250px sidebar and lets the rest fill the screen.

repeat() saves typing: repeat(3, 1fr) is the same as 1fr 1fr 1fr.

Cards that fit any screen

This line is worth learning by heart:

.projects {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  gap: 20px;}

It says: make as many columns as will fit, each at least 240px wide, and share out any space left over. A wide laptop screen gets four or five columns, a phone gets one, and everything in between sorts itself out. No media queries needed.

Spanning cells

An item can stretch across several columns or rows:

.featured {  grid-column: span 2;}

The featured card now takes up two columns. grid-row: span 2 does the same downwards.

A page layout you can read

For a whole page, you can name the areas and draw the layout in text:

.page {  display: grid;  grid-template-columns: 220px 1fr;  grid-template-areas:    "header  header"    "sidebar main"    "footer  footer";  gap: 16px;}
.page > header { grid-area: header; }.page > aside  { grid-area: sidebar; }.page > main   { grid-area: main; }.page > footer { grid-area: footer; }

Each string is a row and each word is a column. The header spans both columns, the sidebar and main sit side by side, and the footer runs along the bottom. Want the sidebar on the right? Swap the words in the middle row, and the column sizes too: grid-template-columns: 1fr 220px;. (> means "a direct child of", so a header inside an article isn't affected.)

Grid or flexbox?

• Items in one line, like a menu, a row of buttons or a header: flexbox.
• Rows and columns that line up, like a card gallery or a page layout: grid.

They work well together. A grid of cards, with flexbox inside each card, is completely normal.

See the grid

In Chrome DevTools, a grid container has a small "grid" badge next to it in the Elements panel. Click it and the page shows the grid lines, numbered.

Try it

First remove the width and margin you gave the cards in CSS Part 3: the grid sets their width now, and gap spaces them. Then make your project cards a grid with the auto-fit line above, and resize the browser window slowly and watch the columns rearrange. Then try spanning on a grid with a fixed number of columns: switch to repeat(3, 1fr) and give the first card grid-column: span 2.

Next: CSS Part 7: Responsive design with media queries