Goal

You’ll be able to build a real two-dimensional layout using CSS Grid, understand the fr unit precisely enough to size columns proportionally without guesswork, and know when reaching for Grid instead of Flexbox actually matters.

Learn

Flexbox, from Part 2, is one-dimensional: it arranges items in a single row or a single column. Grid is two-dimensional: it defines rows and columns together, as one coordinated structure, letting you place items precisely into an actual grid, with items able to align across both directions at once.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

This creates exactly 3 equal-width columns. The fr unit means “one fraction of the available space” — think of it like a ratio, not a fixed measurement. repeat(3, 1fr) is shorthand for writing 1fr 1fr 1fr three separate times; both produce identical results, but repeat() scales much better when you need, say, 12 equal columns.

Items are placed into this grid automatically, row by row, wrapping to a new row once the current one fills up — you don’t need to manually assign each item to a specific cell unless you want finer control than that.

gap works the same way here as it did in Flexbox: consistent spacing between grid items, without adding unwanted space at the outer edges of the grid itself.

The fr unit becomes especially powerful once columns have different proportions, since the browser calculates the actual pixel widths for you based on the ratio, adapting automatically as the container’s width changes — something you’d otherwise have to recalculate by hand every time the screen size changed.

Decision Task

You want 4 columns, but the first column should be twice as wide as the other three. Before reading on: how would you write the grid-template-columns value to achieve that?

Reveal the Answer

grid-template-columns: 2fr 1fr 1fr 1fr; — each fr unit represents a fraction of the total available space, so a column marked 2fr gets exactly twice the space of a column marked 1fr, without you needing to calculate exact pixel widths, and this ratio automatically holds true at any container width.

Common Mistake

Confusing gap with margin on individual grid items. Adding margin to items individually creates uneven, hard-to-predict spacing at the grid’s outer edges (since margin on the first and last items in a row pushes against the container’s own edge), while gap only affects the space between items, keeping the outer edges clean and perfectly aligned to the container automatically.

Practice Questions

1. Write grid-template-columns for a layout with 5 equal columns, using the repeat() shorthand.

Show Answer

grid-template-columns: repeat(5, 1fr);

2. A container is 900px wide with grid-template-columns: 1fr 2fr; and no gap. Roughly how wide is each column, in pixels?

Show Answer

300px and 600px — the 900px splits into 3 equal fr-units total (1+2=3 shares), so each “share” is 300px; the 1fr column gets one share (300px), the 2fr column gets two shares (600px).

3. What’s the practical downside of using margin on individual grid items instead of gap on the container, specifically at the grid’s outer edges?

Show Answer

Margin on individual items adds unwanted space specifically at the grid’s outer edges (first/last items push against the container edge), whereas gap only affects spacing between items, keeping outer edges clean.

4. True or False: items placed into a CSS Grid must always be manually assigned to a specific row and column.

Show Answer

False — items are placed automatically row by row by default, wrapping as needed, unless you specifically choose to assign exact positions.

5. Explain the core structural difference between Flexbox and Grid, using the word “dimensional” in your answer.

Show Answer

Flexbox is one-dimensional, arranging items along a single row or column; Grid is two-dimensional, coordinating rows and columns together as one structure.

Try It Yourself

You want a photo gallery where every item is exactly square, regardless of how wide the columns end up being. Which property would you add to each grid item to force this, using the column width as the reference?

Show Answer

aspect-ratio: 1 / 1; on each item — a genuinely useful modern property for exactly this situation.

Quick Check

1. What’s the core structural difference between Flexbox and Grid?

Show Answer

Flexbox is one-dimensional (row or column); Grid is two-dimensional (rows and columns together).

2. What does 1fr mean?

Show Answer

One fraction of the available space.

3. What property creates spacing between grid items without affecting the outer edges?

Show Answer

gap.

4. You want a photo gallery where every item is exactly square, regardless of how wide the columns end up being. Which property would you add to each grid item to force this, using the column width as the reference?

Show Answer

aspect-ratio: 1 / 1; on each item — a genuinely useful modern property for exactly this situation.

5. You want 4 columns, but the first column should be twice as wide as the other three. Before reading on: how would you write the grid-template-columns value to achieve that?

Show Answer

grid-template-columns: 2fr 1fr 1fr 1fr; — each fr unit represents a fraction of the total available space, so a column marked 2fr gets exactly twice the space of a column marked 1fr, without you needing to calculate exact pixel widths, and this ratio automatically holds true at any container width.

تحميل هذا الباب / Download this Chapterنسخة كاملة للدراسة بدون إنترنت، مع الأسئلة والإجابات والصور المتاحة.
PreviousNext