Subjects and lessons to explore.

Law

Web Development · Foundations

CSS Grid

10 min read 5 practice questions
8 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

CSS Grid is CSS's two-dimensional layout system. A defines columns and rows; its direct children become grid items that can be placed into the resulting cells or made to span several tracks. Set display: grid on the parent, then describe its tracks with properties such as grid-template-columns and grid-template-rows. Grid is useful when both horizontal and vertical structure matter.

Why this matters

Grid gives a page or component an explicit spatial plan instead of relying on offsets and coincidences. In coursework, its terms—container, item, track, line, and area—make layout decisions testable and explainable. In practice, a named grid can keep a header, navigation, main content, and supplementary content coherent as the design evolves. This lesson focuses on Grid's rows, columns, lines, areas, and sizing; flexbox and responsive adaptations are separate subjects.

The college version

A two-dimensional formatting context

An element with display: grid establishes a grid formatting context. Its direct children are grid items; deeper descendants are not automatically items of that same grid. Grid is two-dimensional because the container has a column axis and a row axis. A column or row is a , and the dividing boundaries are grid lines. The rectangle between adjacent row and column lines is a . One or more cells together form a . These names are diagnostic tools: when an item appears in the wrong place, ask which lines, tracks, or area the rule actually addresses. The container controls this arrangement; setting a placement property on an item does not convert that item into a new parent grid for its own descendants.

The author can define an explicit grid with grid-template-columns and grid-template-rows. For example, grid-template-columns: 12rem 1fr; makes two explicit column tracks: a fixed 12rem first track and a second track that receives the remaining available space as a flexible fraction. If items need more slots than the explicit grid supplies, Grid can create implicit tracks; grid-auto-rows and grid-auto-columns control their size. This lesson uses explicit tracks so that placement is visible and intentional.

Placing items with lines and areas

Grid offers more than one readable placement language. Line placement uses grid-column and grid-row. In a three-column grid, grid-column: 1 / 3 places an item from column line 1 up to, but not including, line 3, so it spans two column tracks. Line numbers refer to boundaries, not the tracks themselves. The end line can also be expressed with span, as in grid-column: 1 / span 2. An item without an explicit placement participates in the auto-placement algorithm. Author-defined names can also be attached to grid lines when a design benefits from a more meaningful placement vocabulary.

Named areas make a larger page pattern easier to inspect. grid-template-areas writes a row-by-row diagram using names, and an item joins a named rectangle through grid-area. Every repeated name must make a rectangle; an L-shaped repetition is invalid for a named area. Areas are particularly useful when the layout has meaningful regions such as header, nav, main, and aside. They do not replace semantic HTML: a landmark element still needs appropriate HTML structure. Grid describes placement, while HTML communicates document meaning.

Sizing tracks deliberately

Track lists can mix fixed lengths and flexible sizes. The fr unit represents a share of leftover space in the grid container after fixed-size tracks and gaps are accounted for. Thus 1fr 2fr divides the available flexible space into three equal shares, assigning one to the first track and two to the second. It does not mean a fraction of the entire viewport, and content constraints can affect an actual used size. repeat(3, 1fr) is a compact way to write three equal flexible tracks.

minmax(min, max) gives a track a range. For example, minmax(12rem, 1fr) says a track should not be smaller than 12rem and may take a flexible share up to its maximum behavior. Grid's sizing algorithm considers intrinsic content contributions and constraints, so a classroom calculation should state its simplifying assumptions. gap creates deliberate separation between tracks; it is not a column or row itself. A fixed length, a percentage, an intrinsic size keyword, and a flexible fraction answer different sizing questions; do not replace one mechanically with another. In particular, an item's unbreakable content may impose a minimum that makes a simplified fraction calculation unsuitable for a production layout. When debugging, inspect the computed grid, identify fixed and flexible tracks, and then distinguish a sizing question from a placement question. Do not use this lesson as a substitute for flexbox, media-query, or container-query decisions.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Imagine a bulletin board ruled into rows and columns. The board owner decides how wide each column and how tall each row should be. A note can occupy one square, or stretch across several squares. CSS Grid gives a web page that kind of board. The parent makes the board; its direct children are the notes placed on it. You can point to the board's boundary lines, or give a rectangular region a name such as main.

Some columns can have a fixed width, while others share the room left over. A 1fr track gets one share; a 2fr track gets two shares when the board has flexible space to divide. That is why Grid is helpful when a layout needs both rows and columns planned together.

Picture it like this

Grid is like a labeled bulletin board with ruled rows and columns, where notes can occupy named rectangles or span boundary lines.

Where the picture stops working

A real grid layout also follows CSS sizing rules, content minimums, and auto-placement. The board analogy does not calculate those rules or provide HTML meaning.

Worked example

A dashboard container uses display: grid; grid-template-columns: 160px 1fr 2fr; gap: 20px;. Assume its content box is 800px wide and ignore content minimums. The fixed first column uses 160px. Two gaps use 40px, leaving 600px of flexible space. The remaining tracks have 1 + 2 = 3 fraction shares, so the second track receives 200px and the third receives 400px. A summary card with grid-column: 2 / 4 starts at line 2 and ends before line 4, spanning the second and third tracks. It does not occupy the gaps as tracks; the gaps remain separation between tracks.

Key takeaway

CSS Grid plans rows and columns together. Define tracks, then place direct-child grid items by lines or named areas while treating flexible sizing as a share of leftover space.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

After a parent receives display: grid, which elements are that grid's items?

Choose an answer, then check it.
Question 2 of 3intermediate

What does grid-column: 1 / 3 do in an explicit grid?

Choose an answer, then check it.
Question 3 of 3intermediate

A 800px grid has columns 160px 1fr 2fr and two 20px column gaps. Ignoring content constraints, how wide is the 2fr track?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define grid container, grid item, track, line, and area.
  • Explain how explicit columns and rows create a grid.
  • Distinguish line placement from named-area placement.
  • Apply fr, repeat(), and minmax() to a simple track definition.
  • Calculate a simple fr allocation after fixed tracks are removed.

Common mistakes

  • Calling every descendant a grid item.

    Only direct children of the grid container are items in that grid.

  • Treating a line number as a track number.

    Lines are boundaries; placement from line 1 to line 3 spans two tracks.

  • Assuming fr is a fixed percentage of the viewport.

    Flexible fractions share leftover space after applicable fixed sizing and gaps.

  • Using named grid areas as HTML semantics.

    Use semantic HTML for meaning; areas only describe layout placement.

Easily confused

grid line vs. grid track

A line is a boundary; a track is the row or column space between adjacent lines.

explicit grid vs. implicit grid

Explicit tracks come from the template; implicit tracks are created when placement requires more tracks.

line placement vs. named-area placement

Line placement addresses numbered or named boundaries; named-area placement addresses a declared rectangular region.

Key vocabulary

grid container
An element that establishes a grid formatting context with a grid display value.
grid item
A direct child that participates in its parent grid container's layout.
grid track
A column or row between two adjacent grid lines.
grid line
A dividing boundary that can be used to place or span grid items.
grid cell
The smallest grid unit, bounded by adjacent row and column grid lines.
grid area
A rectangular region made from one or more grid cells.
fr unit
A flexible fraction that shares leftover grid space with other flexible tracks.
implicit grid
Tracks created by Grid when placement needs extend beyond the explicit grid.

Sources & references

  1. Basic concepts of grid layout — Mozilla / MDN Web Docs
  2. CSS Grid Layout Module Level 2 — W3C CSS Working Group

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.