Overview

Turn a parent into a grid and place children across rows and columns.

Grid Container & Items focuses on two-dimensional layout. Grid is strongest when rows and columns both matter, especially when you want explicit placement, named areas, or repeatable responsive tracks.

Core Ideas

• Use Grid Container & Items when rows and columns both shape the design.
• Define tracks with repeat, minmax, fr units, or named lines.
• Let auto-placement help, but explicitly place important regions.
• Check how the grid behaves when content becomes longer than expected.

Step by Step

1. Set display: grid on the layout parent for Grid Container & Items.
2. Define columns, rows, and gaps before placing individual items.
3. Use grid-area, grid-column, or grid-row for intentional placement.
4. Test extra content so implicit tracks do not surprise you.

Beginner Explanation

Grid Container & Items introduces Grid as a two-dimensional layout system for rows and columns.

A grid container controls tracks, gaps, and placement. Its direct children become grid items.

Grid is strongest when the layout needs both horizontal and vertical structure.

Before You Start

• Before practicing Grid Container & Items, decide which element should be the grid container.
• Count the columns and rows the design needs before writing CSS.
• Decide whether auto-placement is enough or whether important items need explicit placement.
• Prepare extra content so you can test how the grid behaves when the layout is not perfect.

Key Grid Properties

• display: grid creates a grid container.
• gap creates row and column spacing.
• grid-column and grid-row place items by line or span.
• grid-area can place items by named area or line shorthand.

Plain-English Glossary

• Grid container: the parent element with display: grid.
• Grid item: a direct child of the grid container.
• Track: one row or column.
• Grid line: the boundary between tracks.
• Grid area: a rectangular group of cells.
• Implicit grid: rows or columns created automatically when content does not fit the explicit grid.

What You Will Learn

• Explain which tracks, lines, or areas Grid Container & Items creates.
• Predict where a new grid item will be placed.
• Use browser developer tools to inspect the grid overlay.
• Change one grid property in the editor and explain how the layout reacts.

Where You Use This in Real Projects

You use Grid Container & Items in dashboards, article layouts, galleries, product grids, admin screens, pricing sections, forms, and app shells.

Grid is especially useful when rows and columns both matter, or when the layout needs named regions that stay readable in CSS.

Browser and Accessibility Notes

• Visual placement should not make the reading order confusing.
• Avoid dense placement when it makes keyboard or source order hard to follow.
• Test small screens, long text, zoom, and extra items so implicit tracks do not surprise you.
• Grid changes layout, not document meaning, so start with semantic HTML and ordered headings.

Code Example

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.header { grid-column: 1 / -1; }

Another Example

.layout {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.layout__wide {
  grid-column: 1 / -1;
}

More Practice Examples

Example 1: Responsive card grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.card--featured {
  grid-column: span 2;
}

• auto-fit creates as many columns as fit in the available space.
• minmax keeps cards from becoming too small while still allowing them to grow.
• A featured item can span more columns, but you should test narrow screens.

Example 2: Page shell with named areas

.shell {
  display: grid;
  grid-template-areas:
    "top top"
    "nav content";
  grid-template-columns: 16rem 1fr;
  gap: 1rem;
}

.top { grid-area: top; }
.nav { grid-area: nav; }
.content { grid-area: content; }

• Named areas make the layout easy to read.
• The template rows describe the visual page shell.
• Area names must match the grid-area values on children.

Example 3: Auto-placement gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 7rem;
  grid-auto-flow: dense;
  gap: .75rem;
}

.gallery__wide { grid-column: span 2; }
.gallery__tall { grid-row: span 2; }

• The explicit columns are fixed, while rows can be created automatically.
• span makes some items larger without manually placing each one.
• dense can fill gaps visually, so check that reading order still makes sense.

Example Explained

• The Grid Container & Items example starts by choosing the grid container.
• The template properties define the explicit rows, columns, or named areas.
• Direct children become grid items and can be auto-placed or explicitly placed.
• The gap property creates consistent spacing without extra wrapper elements.

How to Read This Example

1. Find display: grid and name the grid container.
2. Read grid-template-columns, grid-template-rows, or grid-template-areas before looking at item placement.
3. Identify which items are auto-placed and which items are manually positioned.
4. Change one track, span, area, or gap in the Grid Container & Items example and resize the preview.

Checklist

• Name important areas or lines when it improves readability.
• Use minmax and auto-fit/auto-fill for resilient responsive grids.
• Check how implicit rows and columns are created.

Common Mistakes

• Overplacing every item when auto-placement would be simpler.
• Forgetting that content can create implicit tracks.
• Using fixed columns where minmax or fr units would respond better.

Do and Don't

• Do: use Grid Container & Items when rows and columns both matter.
• Do: use gap for spacing and minmax/fr units for flexible tracks.
• Don't: use Grid only to center one row of buttons when Flexbox would be simpler.
• Don't: use dense placement if it makes visual order disagree with meaningful source order.

Practice Challenge

Turn the Grid Container & Items example into a small page section, then add one extra item and predict where Grid will place it.

Try These Changes

• Change one column from 1fr to minmax(12rem, 1fr) and explain the difference.
• Add one extra grid item and predict where auto-placement will put it.
• Make one item span two columns, then test the narrow viewport result.
• Turn on the browser grid overlay and identify lines, tracks, gaps, and areas.

Quick Check

• Question: What creates a grid container? Answer: display: grid or display: inline-grid.
• Question: What is a track? Answer: One grid row or column.
• Question: What does 1fr mean? Answer: One share of available free space.
• Question: Which elements become grid items? Answer: Direct children of the grid container.

Debugging Checks

• Confirm display: grid is on the parent element.
• Use browser grid overlays to inspect tracks, line numbers, gaps, and areas.
• Check for misspelled area names and non-rectangular grid-template-areas.
• Check implicit rows or columns when items appear outside the expected layout.

Mini Project

Build a small CSS Grid section for Grid Container & Items: two columns, three rows, one item spanning full width, gap spacing, and notes explaining tracks, lines, and placement.

Mastery Check

• You can describe the tracks used by the Grid Container & Items layout.
• You can place one item explicitly and let another auto-place.
• You can make the grid adapt when content or viewport size changes.