CSS Grid

Learning objectives#

• Define columns and rows with grid-template-columns
• Use the fr unit, repeat() and minmax()
• Build a responsive card grid without media queries
• Name areas with grid-template-areas

Explanation#

display: grid creates a grid container. grid-template-columns defines the columns; rows are created automatically as needed.

The fr unit means “one fraction of the free space”. 1fr 2fr gives the second column twice the width of the first.

repeat(auto-fill, minmax(220px, 1fr)) creates as many columns as fit, each at least 220px wide — a fully responsive grid in one line.

Syntax#

1.grid {
2  display: grid;
3  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
4  gap: 24px;
5}

Code example: Holy-grail layout with named areas#

1<style>
2  body { margin:0; font-family:sans-serif; }
3  .page {
4    display:grid; min-height:100vh; gap:8px;
5    grid-template-columns: 180px 1fr;
6    grid-template-rows: auto 1fr auto;
7    grid-template-areas: "header header" "sidebar main" "footer footer";
8  }
9  .page > * { padding:16px; background:#eef2ff; }
10  header { grid-area: header; } aside { grid-area: sidebar; }
11  main { grid-area: main; } footer { grid-area: footer; }
12  @media (max-width: 600px) {
13    .page { grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; }
14  }
15</style>
16<div class="page">
17  <header>Header</header><aside>Sidebar</aside><main>Main content</main><footer>Footer</footer>
18</div>

A header across the top, a sidebar and main area side by side, and a footer. Below 600px the sidebar moves under the main content.

Step-by-step explanation#

1. grid-template-columns: 180px 1fr creates a fixed sidebar column and a flexible main column.
2. grid-template-rows: auto 1fr auto lets the middle row stretch to fill the height.
3. grid-template-areas draws the layout with names; each child is placed with grid-area.
4. The media query redefines the areas as a single column for narrow screens.

Real-world use case#

Common mistakes#

Best practices#

• Use repeat(auto-fill, minmax()) for responsive card grids
• Use named areas for page-level layouts
• Combine Grid for the page with Flexbox inside components
• Keep the source order logical — visual reordering does not change keyboard order

Remember this#

Practice exercise#

1.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.