Chapter 15 introduced Flexbox as a one-dimensional layout system for rows and columns. Flexbox is excellent for navigation bars, card rows, centered content, and similar single-axis arrangements. But many layouts on the web are genuinely two-dimensional: they need rows and columns working together at the same time. CSS Grid is the layout system built for that job.

This chapter teaches CSS Grid from the ground up. You will learn how Grid containers and Grid items relate to each other, how to define rows and columns using tracks, how to use fractional units to distribute space proportionally, how to control gaps, and how to place items precisely within a Grid. You will also learn when to reach for Grid and when Flexbox is the better tool. By the end of this chapter, you will be able to build image galleries, page skeletons, dashboard cards, and multi-column content layouts using Grid — and you will understand how Grid and Flexbox complement each other in the same project.

Before CSS Grid, developers built two-dimensional layouts using floats, tables repurposed as layout tools, and complicated hacks with absolute positioning. These approaches were fragile. A layout that worked in one browser often broke in another. Pages required deeply nested HTML just to create a column. Changing the layout meant rewriting large amounts of HTML.

Flexbox improved this situation significantly when it arrived. But Flexbox was designed to work along a single axis at a time. It does rows or columns, not rows and columns simultaneously. When designers needed true grid-based layouts — a page with a sidebar, main content, and footer all positioned in relation to each other — Flexbox required workarounds.

CSS Grid was designed specifically to solve two-dimensional layout. It lets you define both rows and columns on a single container, then place any child element into any cell in that grid. The HTML can stay clean. The layout logic moves into CSS where it belongs. Grid became fully supported across all major browsers starting around 2017 and is now one of the most important layout tools in CSS. Learning it is not optional for modern web development.

Like Flexbox, CSS Grid is applied to a container element. The container becomes a Grid container. Its direct children automatically become Grid items. To make an element a Grid container, you apply one CSS property: display: grid.

At this point, nothing visible has changed yet. The div.gallery is now a Grid container, and the six .card divs are Grid items. But without defining columns or rows, the browser stacks everything in a single column exactly as block elements normally would. The visual change comes when you define the structure of the grid, starting in Section 16.4.

The building blocks of a CSS Grid are tracks. A track is a single row or a single column in the grid. When you define a grid, you are defining its tracks. The space between tracks is the gap. The intersections of rows and columns create cells. A rectangular area covering one or more cells is called a grid area.

Visualizing the grid is important. Imagine graph paper. The horizontal lines create rows. The vertical lines create columns. Each square on the paper is a cell. An item can occupy one cell or span multiple adjacent cells.

Grid also gives you access to grid lines — the dividing lines between tracks. They are numbered starting from 1. A three-column grid has four vertical grid lines: line 1 on the left edge, line 2 between the first and second columns, line 3 between the second and third columns, and line 4 on the right edge. Understanding grid lines becomes important when placing items explicitly in Section 16.9.

When you define columns and rows in your CSS, those are called explicit tracks. You have deliberately told the browser how many tracks to create and how large they should be.

When items overflow the explicit grid — meaning you defined three columns but have enough items to need more rows than you explicitly defined — the browser creates additional rows automatically. These are called implicit tracks. You can control the size of implicit tracks using the grid-auto-rows property, covered in Section 16.5. For most beginner layouts, thinking in terms of explicit tracks is enough.

The grid-template-columns property defines how many columns the grid has and how wide each column should be. The value is a space-separated list of sizes. Each size you provide creates one column. Two sizes create a two-column grid. Four sizes create a four-column grid.

This creates a three-column grid where each column is exactly 200 pixels wide. Items flow into the columns from left to right. When three items have filled the first row, the next item starts a new row automatically. You can use any CSS length unit for column sizes: px, em, rem, percentages, and the fractional unit fr (covered in Section 16.7).

Columns do not have to be the same size. A sidebar layout might use a wide main column and a narrower sidebar column:

This example uses two different units on purpose. The sidebar is 200 pixels fixed. The 1fr means the remaining space goes to the main content area. The fr unit is one of Grid's most powerful features and gets its own full section later in the chapter.

The grid-template-rows property defines explicit row heights. It works the same way as grid-template-columns but controls horizontal tracks instead of vertical ones.

This creates a three-column, two-row grid. The first row is 200 pixels tall. The second row is 400 pixels tall. In many practical layouts, you do not need to define row heights explicitly. If you do not define rows, the browser creates them implicitly as content overflows the explicit grid, and each row takes the height of its tallest item. This natural behavior is usually what you want.

When the browser creates implicit rows automatically, you can control their default height with grid-auto-rows:

Now every automatically created row will be 250 pixels tall, giving the grid a uniform cell height regardless of how many rows the content requires. A more flexible approach uses minmax(), covered fully in Section 16.8:

Like Flexbox, CSS Grid uses the gap property to control the space between tracks. The gap appears between columns and between rows, but never on the outer edges of the grid.

This adds 1.5rem of space between every row and every column. If you need different horizontal and vertical spacing, you can provide two values. The first value controls the row gap; the second controls the column gap:

Here the rows have 2rem of space between them, and the columns have 1rem of space between them. You can also use the longhand properties row-gap and column-gap individually, though the shorthand gap is preferred for most use cases.

The fr unit is unique to CSS Grid. It stands for fraction of the available space. When you use fr units in grid-template-columns, the browser calculates how much space is left after fixed-size columns and gaps have been placed, then divides that remaining space among the fractional columns according to their proportions.

Three columns, each getting one-third of the total available space. If the container is 900 pixels wide, each column is 300 pixels wide. If the container is 600 pixels wide, each column is 200 pixels wide. The columns grow and shrink with the container automatically — already a significant improvement over writing 33.33% and dealing with rounding errors.

The middle column gets twice as much space as each side column. In a 900-pixel container, the middle column is 450 pixels wide and each side column is 225 pixels wide. A common main-content-plus-sidebar proportion is grid-template-columns: 3fr 1fr; — the main content gets three-quarters of the available space, and the sidebar gets one-quarter.

One of the most powerful patterns in Grid is mixing px (or rem) with fr. The sidebar is always 250 pixels wide. The main content area fills all remaining space. This is a much cleaner way to write a classic sidebar layout than the float-based approaches of the past. When the browser calculates the 1fr, it first subtracts the 250 pixels of the fixed column (and any gaps) from the total container width, then assigns the remainder to the 1fr column.

Two CSS Grid functions are worth learning early because they appear in nearly every real project: repeat() and minmax().

The repeat() function lets you avoid writing the same track size multiple times. Instead of writing grid-template-columns: 1fr 1fr 1fr 1fr;, you write:

The first argument to repeat() is the number of times to repeat. The second argument is the track size (or sizes) to repeat. These produce an equivalent four-column equal-width grid. repeat() becomes especially useful with the auto-fill keyword, which allows the browser to create as many columns as will fit in the container:

With auto-fill, the browser creates as many 250px columns as will fit in the available space and wraps excess items to new rows. This creates a naturally responsive gallery without media queries — if the viewport is wide, you get many columns; if it is narrow, you get fewer. The difference between auto-fill and auto-fit is subtle and involves how empty space is handled at the end of a row. For most beginners, auto-fill is the safer default.

The minmax() function defines a size range for a track. It takes two arguments: a minimum size and a maximum size.

Each column is at least 200 pixels wide but will grow up to an equal share of available space (1fr). This prevents columns from collapsing to an unreadably narrow width while still allowing them to expand naturally. A very common professional pattern combines auto-fill with minmax():

By default, Grid items flow automatically into the grid from left to right and top to bottom, filling each cell in order. This automatic placement is called auto-placement and is exactly what you want for galleries, card grids, and other uniform layouts. But Grid also allows you to place items explicitly into specific positions. This is what makes Grid so powerful for page-level layouts.

Every Grid container has numbered lines. For columns, line 1 is the left edge. For rows, line 1 is the top edge. The last line number is one more than the number of tracks. A three-column grid has vertical lines 1, 2, 3, and 4. A two-row grid has horizontal lines 1, 2, and 3.

You can tell a Grid item where to start and end using these line numbers:

This places the item starting at column line 1 and ending at column line 3 — meaning it spans two columns. It starts at row line 1 and ends at row line 2 — meaning it occupies the first row.

Instead of specifying end line numbers, you can use the span keyword to indicate how many tracks an item should cross:

This tells the featured item to span two columns, starting wherever the auto-placement algorithm puts it.

Consider a simple page where you want a header that spans the full width, a main content area, and a sidebar:

The header and footer span both columns using grid-column: 1 / 3. The main content and sidebar each occupy one column in the middle row, placed there automatically by the browser. This pattern — a two-column layout with a full-width header and footer — is one of the most common page structures on the web, and Grid makes it straightforward.

Grid also allows you to name areas and assign items to those names, which many developers find easier to read than line numbers:

The grid-template-areas property uses quoted strings where each string represents a row. Each word in the string represents a column. When the same name appears in multiple cells, the item stretches across those cells. A period . represents an empty cell. Named grid areas make layout intentions explicit and readable — particularly helpful in large projects where the layout code needs to be easy to understand weeks or months later.

Now you will put these concepts together into a realistic full-page layout. This example builds the core skeleton of the Student Learning Site's main layout: a full-width site header, a full-width navigation below it, a main content area on the left, a 280-pixel sidebar on the right, and a full-width footer.

Walk through the important decisions in this code. The .page-wrapper is the Grid container. It has two columns: the main content area gets 1fr (all available space), and the sidebar gets a fixed 280px. The grid-template-areas property names four rows of layout. The header and nav each span both columns. The content and sidebar sit side by side in the middle row. The footer spans both columns again at the bottom. Each semantic element then receives its grid-area assignment in a clean, readable block.

Notice that the .lesson-grid inside the main content is itself a second Grid using repeat(auto-fill, minmax(240px, 1fr)). This is a nested Grid. The outer Grid controls the overall page structure. The inner Grid controls the lesson card layout. Nesting Grid inside Grid is normal and common.

The sidebar uses align-self: start so it does not stretch to match the full height of the main content column. Without this, the sidebar would expand to fill all available vertical space. align-self: start keeps it flush with the top.

Both Grid and Flexbox are essential. Knowing which to use comes with practice, but here are reliable starting rules.

Browser developer tools have excellent Grid debugging features. When you inspect a Grid container in the Elements panel, Firefox shows an overlay with column and row numbers drawn directly on the page, including gaps and track sizes — the most detailed Grid debugger available in any browser. Chrome and Edge show a Grid badge next to Grid containers in the Elements panel; clicking the badge toggles a visual overlay showing the grid lines.

Describe how wide each column is. (Hint: 900px minus two 20px gaps leaves 860px to distribute. The first 1fr gets one-quarter, the 2fr gets two-quarters, the last 1fr gets one-quarter.)

How many rows form? How tall is each row?

Describe the visual layout produced. Which elements are wide? Which are narrow? How does the main content compare in height to the aside?

There are six child elements inside .card but they are not forming a three-column grid. What is missing?

The main content area is not appearing in the correct grid area. What is the problem?

On a wide screen the gallery looks fine. On a narrow mobile screen, cards overflow outside the container. Which change would fix this without adding media queries?

A student wants the header to span both columns. The grid-template-areas declaration shows "header sidebar" in the first row, meaning the header only takes one column. How should grid-template-areas be changed so the header spans both columns?