Chapter 5: Grid layout

Introduction

The introduction presents CSS grid as a two-dimensional layout tool that complements flexbox and allows flexible sizing and placement of elements.

• Two-dimensional grid layout: Explain that CSS grid defines columns and rows and places elements within them, with elements occupying one cell or spanning multiple columns or rows.
  Why it matters: This is the basic layout model behind the chapter’s grid examples.
• Grid sizing and placement choices: Describe the broad choices between precisely defining a grid’s size or letting it size to its contents, and between precisely placing items or letting them flow to fill gaps.
  Why it matters: It explains why grid can accommodate both planned arrangements and changing content.
• Grid and flexbox relationship: Explain that grid complements flexbox rather than replacing it, and that together they provide a fuller set of layout capabilities.
  Why it matters: It frames grid as another layout tool to use alongside flexbox.

Key terms: CSS grid, two-dimensional layout, columns, rows, grid, place items, flow naturally, Flexbox, Grid Layout Module

5.1 Building a basic grid

The section builds a six-item grid and explains how the container, track sizes, and gaps shape its layout.

• Grid container and items: Explain how display: grid establishes a grid container and makes its children grid items, and distinguish its block behavior from inline-grid.
  Why it matters: This establishes which element defines the grid and which elements it lays out.
• Grid tracks and fraction units: Describe how grid-template-columns and grid-template-rows size tracks, using fr units for equal or proportional tracks and mixing units for fixed and flexible columns.
  Why it matters: Track sizes determine the basic proportions of a grid.
• Grid cell gutters: Explain how gap adds space between grid cells and how one or two values specify that spacing.
  Why it matters: It lets you space cells without changing their track-size definitions.

Key terms: display: grid, grid container, grid items, inline-grid, grid-template-columns, grid-template-rows, fr, fraction unit, grid track, gap

5.2 Anatomy of a grid

This section names the parts of a grid and uses a page layout to show how grid items, tracks, and the repeat() function fit together.

• Grid lines tracks and areas: Distinguish grid lines, tracks, cells, and areas, and explain how they relate to one another.
  Why it matters: These terms let you describe where content sits in a grid.
• Page sections across grid cells: Describe how the example page’s sections occupy its two-column, four-row grid, including sections that span multiple cells.
  Why it matters: The example makes the difference between a single cell and a larger grid area visible.
• Flattened grid item markup: Explain why the example changes from nested flexbox markup to a flatter HTML structure for its grid layout.
  Why it matters: The HTML structure determines which page sections the main grid can place as its items.
• Column and row track sizing: Explain what the example’s fractional column sizes and auto row sizes say about its tracks.
  Why it matters: Track sizes explain the basic proportions and content-dependent height of the example layout.
• Repeating grid track patterns: Describe how repeat() abbreviates repeated track sizes, including a repeated sequence and its use within a longer template.
  Why it matters: Reading repeat() lets you work out the tracks in a template without a long list of sizes.

Key terms: grid line, grid track, grid cell, grid area, grid container, grid item, flatten the HTML, grid-template-columns, grid-template-rows, fr

5.2.1 Numbering grid lines

This section explains how numbered grid lines, grid-row, grid-column, and span place items in a CSS grid.

• Numbered Grid Line Placement: Explain how grid-row and grid-column use numbered grid lines to define where an item sits and how far it extends.
  Why it matters: Line numbers let you describe an item's position and span precisely.
• Grid Placement Shorthands: Describe what the two values in grid-column or grid-row shorthand represent.
  Why it matters: Reading the shorthand makes placement rules easier to interpret.
• Span And Automatic Placement: Explain how span can specify an item's extent without an explicit starting or ending row, and what the browser does in that case.
  Why it matters: An item can have a specified span without every grid line being specified.

Key terms: grid line, grid-column, grid-row, grid area, grid-column-start, grid-column-end, grid-row-start, grid-row-end, span, grid item placement algorithm

5.2.2 Working together with flexbox

Explains how grid and flexbox complement each other, using alignment needs and the influence of content on sizing to choose between them.

• One versus two dimensional alignment: Explain why flexbox suits a row or column of items, while grid suits items that must align across tracks. Apply that distinction to the page layout and its horizontal navigation menu.
  Why it matters: The direction of alignment helps you choose a layout method for each part of a page.
• Content versus layout driven sizing: Distinguish flexbox’s content-out approach from grid’s layout-in approach, including how content can affect the size of a grid track.
  Why it matters: This distinction helps you decide whether content or a shared layout should have more influence on sizing.
• Margins and gaps between items: Explain why the page resets some margins to zero when using grid or flexbox with gaps.
  Why it matters: It explains why a gap may still leave more space than intended.

Key terms: flexbox, grid, one dimensional, two dimensional, flex-wrap, track, content out, layout in, grid track, margin collapsing

5.3 Alternate syntaxes

Introduces named grid lines and named grid areas as alternative syntaxes for laying out grid items, with readability guiding the choice between them.

• Choosing a grid syntax: Explain that named grid lines and named grid areas are alternative syntaxes for laying out grid items, and that the choice between them depends on preference and which is easier to read for a particular design.
  Why it matters: Readability gives you a practical way to choose between the two syntaxes.

Key terms: named grid lines, named grid areas

5.3.1 Naming grid lines

This section shows how to name grid lines and use those names, including shared and repeated names, to place grid items.

• Named grid line placement: Explain how bracketed names in a grid track declaration let you refer to grid lines by name rather than number when placing an item.
  Why it matters: Names can make placement easier to follow when a grid has many tracks.
• Shared names and area suffixes: Describe how one line can have multiple names and how matching -start and -end line names define a span usable with grid-column.
  Why it matters: These naming options let a line serve as a boundary for more than one part of a grid.
• Repeated line name selection: Explain how repeated grid line names are selected by occurrence number and how an item can span tracks from the selected line.
  Why it matters: Occurrence numbers make repeated names useful for positioning items in patterned grids.

Key terms: named grid lines, grid tracks, left-start, left-end, grid-column, repeat(), row 3, col 2 / span 2

5.3.2 Naming grid areas

This section shows how to lay out grid items with named areas instead of grid lines, including the syntax’s shape and empty-cell rules.

• Named area placement: Explain how to define a layout with grid-template-areas on the container and place items in it with grid-area. Describe how quoted strings represent rows and whitespace separates columns.
  Why it matters: Named areas can make a layout easy to read when you already know where each item should go.
• Area shapes and empty cells: State the shape restriction on a named grid area and describe how to leave a cell empty in the template.
  Why it matters: These rules help you draw a valid area template without assigning every cell to an item.

Key terms: grid-template-areas, grid-area, named grid areas, named grid area, rectangle, period

5.4 Explicit and implicit grid

Explains how implicit tracks and automatic column sizing let a grid accommodate an unknown number of items and adapt to available space.

• Explicit and implicit tracks: Distinguish explicitly defined tracks from implicit tracks and explain why implicit tracks are useful when the number or placement of items is unknown.
  Why it matters: You can make a grid accommodate changing content without placing every item individually.
• Implicit track sizing: Describe the default size of implicit tracks and how grid-auto-columns or grid-auto-rows changes it, using the portfolio rows as an example.
  Why it matters: Automatically added tracks can still have a deliberate, consistent size.
• Responsive columns with auto-fill: Explain what minmax() constrains and how combining minmax(200px, 1fr) with repeat() and auto-fill determines the portfolio's columns.
  Why it matters: This combination lets the number of columns respond to available width without a fixed column count.
• Empty tracks and auto-fit: Distinguish auto-fill from auto-fit when there are too few items to occupy all the available tracks.
  Why it matters: The choice controls whether unused track space remains or occupied tracks stretch across the container.

Key terms: explicit grid, implicit grid, grid-template-*, implicit tracks, grid item placement algorithm, auto, grid-auto-columns, grid-auto-rows, implicit grid rows, 1fr

5.4.1 Adding variety

This section enlarges featured grid items, explains the gaps automatic placement can leave, and uses dense auto-flow to fill those gaps while cautioning about display order.

• Featured item placement gaps: Explain how featured items can span two grid tracks in each direction and why that can leave gaps when the grid places items automatically.
  Why it matters: It explains why enlarging selected images can create unexpected empty spaces in an otherwise automatic grid.
• Dense auto-flow backfilling: Describe how grid-auto-flow: dense fills gaps left by larger items and how it can affect their display order.
  Why it matters: Dense placement can make a varied grid look more filled-in without explicitly positioning each item.
• Dense placement navigation risk: Explain why dense auto-flow needs caution when people navigate by keyboard or screen reader.
  Why it matters: A grid that looks neatly packed may still present a confusing sequence to some users.

Key terms: featured, span, grid tracks, grid item placement algorithm, grid-auto-flow, dense, row dense, backfill, source order, display order

5.4.2 Adjusting grid items to fill the grid track

This section fixes gaps beneath images in a grid by stretching the images with flexbox and using object-fit to avoid distortion.

• Grid item height gaps: Explain why a grid item can fill its grid area while its image leaves unused height, and describe how a column flexbox and image flex-grow close the gap.
  Why it matters: It explains why aligning the grid items alone does not make their contents align.
• Image fitting and cropping: Distinguish the image element’s box from the image rendered inside it, and explain why object-fit: cover is used when the image grows.
  Why it matters: It lets the images fill their allotted space without appearing stretched out of proportion.

Key terms: grid item, grid area, <figure>, flex container, column, flex-grow, object-fit, fill, cover, contain

5.5 Subgrid

This section explains how subgrid aligns elements inside separate grid cards to their parent grid’s tracks, then shows how to apply it with a fallback.

• Cross-card content alignment: Explain why the author-card layout needs subgrid: placing the cards in a row gives them equal height, but does not by itself align their headings, paragraphs, and links with one another.
  Why it matters: It explains why a grid of cards can still need another grid for their contents.
• Inner grid setup: Describe how to turn the cards into subgrids by applying display: grid to the grid items and using subgrid for the inner grid’s rows, columns, or both.
  Why it matters: These are the CSS steps that make the card contents participate in the parent grid’s alignment.
• Subgrid support fallback: Explain why the example includes a fallback and what alignment it cannot reproduce; describe the alternative of applying subgrid styles inside a feature query.
  Why it matters: It helps distinguish an acceptable fallback from the full alignment subgrid provides.

Key terms: subgrid, grid lines, grid container, grid items, display: grid, grid-template-rows, grid-template-columns, fallback, @supports

5.5.1 Additional options

The section explains how subgrid items can be placed with inherited or newly named grid lines, then briefly describes masonry layout as a possible future grid feature.

• Inherited subgrid placement names: Explain that a subgrid inherits line numbers, line names, and grid area names from its parent grid, and that these can be used to place items within the subgrid.
  Why it matters: You can place subgrid items using the parent grid’s existing references.
• Additional subgrid line names: Describe how to add line names to a subgrid and use them to position an item between grid lines.
  Why it matters: New names give you another way to specify where an item goes within a subgrid.
• Masonry layout distinction: Distinguish the briefly described masonry layout from aligned grid rows and state its current implementation caveat.
  Why it matters: It helps distinguish the layout mentioned in the note from the aligned rows of a conventional grid.

Key terms: subgrid, line numbers, line names, grid area names, parent grid, subgrid keyword, grid line names, grid-row, masonry layout, equal-width columns

5.6 Alignment properties

Explains how CSS alignment properties position grid tracks within a container and how placement shorthands combine alignment values.

• Grid alignment directions: Distinguish the three justify properties from the three align properties by the direction of placement they control in a grid.
  Why it matters: The property names tell you which direction of placement you are adjusting.
• Grid track distribution: Explain when justify-content and align-content matter for a grid and describe how their listed values place or distribute its tracks.
  Why it matters: These properties give you control over unused space around grid tracks.
• Placement shorthand properties: Describe what place-content, place-items, and place-self combine, and interpret the section’s place-content example.
  Why it matters: A placement shorthand can express both directions in one declaration.

Key terms: justify-content, justify-items, justify-self, align-content, align-items, align-self, grid tracks, grid container, start, end

5.7 Summary