Skip to content
skillbld
HTML & CSS · 14-day planAll days
Day 11 of 14 30 min

Build two-dimensional layouts with CSS Grid. Define columns and rows with fr units and repeat, make an image gallery that adapts to any screen with auto-fit and minmax, place items across several cells, and lay out a whole page with named grid areas.

By the end of today you can

  • Turn a container into a grid and define columns with grid-template-columns
  • Use the fr unit, repeat() and gap
  • Make responsive galleries with repeat(auto-fit, minmax())
  • Span items across columns and rows
  • Lay out a page with grid-template-areas, and choose between Grid and Flexbox

Flexbox lines things up in one direction. CSS Grid works in two: rows and columns at once. It's perfect for galleries, dashboards and whole-page layouts.

Mind map · click a dot to fold, drag to pan

Columns and the fr unit

index.html · edit it, the preview updates
Page preview
Sketch
A CSS grid with three columns, 1fr 2fr 1fr, and two rows. The middle column is twice as wide as the others because fr means a fraction of the free space. Grid lines are numbered from 1 at the left edge to 4 at the right edge. The gap is the space between tracks. An item with grid-column: 1 / 3, or span 2, stretches across the first two columns.
  • display: grid on the container; children become grid items and fill the cells in order.
  • grid-template-columns sets the column sizes.
  • fr = a fraction of the free space: 1fr 2fr gives the second column twice as much.
  • repeat(3, 1fr) = 1fr 1fr 1fr.
  • Rows are created automatically as needed; grid-template-rows sizes them explicitly.
index.html · edit it, the preview updates
Page preview· 320px wide

Use the Phone / Tablet / Desktop buttons above the preview: the number of columns changes by itself.

repeat(auto-fit, minmax(160px, 1fr)) means "as many columns as fit, each at least 160px, stretched to fill the row". No media queries needed. object-fit: cover fills each box with the image, cropping instead of squashing.

Spanning cells

index.html · edit it, the preview updates
Page preview
  • grid-column: span 2: two columns wide.
  • grid-row: span 2: two rows tall.
  • grid-column: 1 / -1: from the first line to the last, the full width.

Whole-page layouts with areas

index.html · edit it, the preview updates
Page preview· 320px wide

grid-template-areas draws the layout as a little text map; each element joins its area with grid-area. Try the Phone width: the sidebar is cramped. On Day 12 a media query will stack it on small screens by just redrawing the map.

Grid or Flexbox?

Sketch
When to use Flexbox and when to use Grid. Flexbox is one-dimensional: items flow in a single row or column and their sizes come from their content, ideal for navbars, button groups and centring. Grid is two-dimensional: you define rows and columns first and place items into them, ideal for galleries, card grids and whole-page layouts. Many pages use Grid for the page and Flexbox inside each part.
Use Flexbox forUse Grid for
One row or columnRows and columns
Navbars, toolbars, button groupsGalleries, card grids, dashboards
Content decides the sizeThe layout decides the size
Centring somethingWhole-page layouts

They work well together: Grid for the page, Flexbox inside a card or the header.

Recap

  • display: grid + grid-template-columns; fr shares space; repeat() saves typing; gap spaces.
  • repeat(auto-fit, minmax(200px, 1fr)): responsive columns without media queries.
  • grid-column: span 2, grid-row: span 2, 1 / -1 for full width.
  • grid-template-areas + grid-area for page layouts.
  • Flexbox for one direction; Grid for two.

Tomorrow: responsive design, so everything works on every screen.

Knowledge check

Test what you learned

5 questions · pick an answer to see if you're right

0/5
  1. 1

    What does grid-template-columns: 1fr 2fr; do?

  2. 2

    What does repeat(3, 1fr) mean?

  3. 3

    Why is repeat(auto-fit, minmax(200px, 1fr)) so popular?

  4. 4

    How do you make a grid item span two columns?

  5. 5

    When is Flexbox usually a better fit than Grid?

Finished day 11?

Mark complete and continue to Day 12: Responsive Design

Was this lesson helpful?

Need a breather? Take a two-minute break

Day 10FlexboxDay 12 Responsive Design

Keep going