Content updated
By the end, you can…
- Grid defines rows and columns on a parent. Items occupy cells or span between grid lines.
- Explain the example, change one value, and check the result in your own page.
One idea at a time
Grid is useful when rows and columns need to relate to one another. Set display: grid on the parent and its direct children become grid items. The HTML reading order remains important even when placement rules move an item visually. Flexbox and Grid can work together: a page may use Grid for its regions and Flexbox for actions inside a card.
A track is the space between two grid lines. grid-template-columns defines column tracks; grid-template-rows defines explicit row tracks. Rows created automatically can size themselves to their content. The fr unit shares available space after other sizing needs are accounted for. A grid with three columns has four boundary lines, which is why a span ends at a line rather than a column number.
What to remember first
Grid defines rows and columns on a parent. Items occupy cells or span between grid lines.
Read the CSS before trying it
display: gridCreate the grid- Apply it to the parent, not separately to every child.
grid-template-columns / grid-template-rowsDefine tracks- Three column values create three columns. auto rows can grow with their content.
repeat(3, minmax(0, 1fr))Three flexible columns- repeat avoids writing the same track three times. minmax gives each track a zero minimum and a flexible maximum, helping it shrink.
gapSpace between tracks- Adds gutters without adding space around the outside edge. gap is the modern name; older examples may use grid-gap.
grid-column / grid-rowStart and end lines- 1 / 3 starts at line 1 and ends at line 3, spanning two tracks. It does not include the third column.
Walk through an example
<div class="layout">
<div class="item featured">Read</div>
<div class="item">Try</div>
<div class="item">Review</div>
<div class="item">Repeat</div>
<div class="item">Share</div>
<div class="item">Reflect</div>
</div>.layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.item {
padding: 16px;
background-color: #e0e7ff;
color: #312e81;
}The first div has two classes: item supplies its shared appearance and featured lets us target only that card. Six items flow into the three columns in source order, producing two rows. The gap separates them. In the second version, the first item spans from column line 1 to line 3, so it occupies two columns and the remaining items flow into the remaining slots. The layout needs another row; that is an expected consequence of the span.
See it happen: try a small change
Predict what will change, choose a version, and compare the live result with the CSS. Use the real controls when the example includes them.
Code to notice
.layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.item {
padding: 16px;
background-color: #e0e7ff;
color: #312e81;
}Live result
What changed: Six items fill three columns and two rows in source order.
Look a little closer
A fixed column such as 200px stays that wide even when little space is available. A 1fr column shares remaining space but its automatic minimum can still be constrained by long content. minmax(0, 1fr) helps the track shrink; text may still need wrapping. Grid does not make an oversized image or unbroken string harmless by itself.
You can describe a header spanning two columns with grid-column: 1 / 3, while other items fill the columns below it. Keep the page's meaningful HTML regions and their reading order intact. The next lesson adds a breakpoint to change column count. For deeper practice, the existing Grid track explores tracks, fractional units, placement, and auto-fit layouts.
Continue with focused Grid examples
Try it in your own project
Copy all six cards and the grid rules. Add .featured { grid-column: 1 / 3; } and count the resulting rows. Remove the span before comparing two columns. At a narrow width, record crowding; the next lesson teaches changing column count automatically.
The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.
A common wrong turn
Confusing end lines with included column numbers leads to an off-by-one span. Draw four lines for a three-column grid and count the spaces between them. Do not use visual placement to hide an incorrect document order.
Your turn: arrange rows and columns with Grid
Create six topic cards in three columns, then make the first card span two columns.
Try this task in your own index.html and styles.css files. Save both files and refresh your browser to see changes. Continue below follows the course order, including its practice checkpoint.
Related practice in the course path
This practice appears in CSS Grid, step 3. Follow Continue below to reach it after its prerequisites.
For related guided practice, Build a responsive card grid gives you starter code, a live preview, hints, and checks. The task above is a separate variation to try in your own project.
- Write six items in the reading order you want before adding Grid.
- Define three equal flexible columns and a gap, then count rows and columns.
- Add a span to the first item. Predict the new placement, then compare it with the browser and inspect the layout at a narrow width.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.