Manuals / CSS Layout / Ch 3

CoreIntermediate45 min read

3. CSS Grid

CSS Layout · 12 pages source format

Two-dimensional layouts for pages and dashboards.

What you'll learn

  • tracks
  • areas
  • minmax

Key idea

Grid defines rows and columns. Place items by line or area names.

Quick check

fr units represent…

Do this now

Write 3 notes on: Grid.

Clear?

Practice

Build a header/main/sidebar layout with grid-template-areas.

Starter
grid-template-areas: "header header" "side main";

Do this now

Commit one file practicing Grid.

Clear?

Checklist