Skip to content
Learn Netverks

Lesson

Step 10/36 28% through track

grid-alignment

Grid alignment

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
intermediate

This lesson

This lesson teaches Grid alignment—the ideas, syntax, and habits you need before moving on in Foundation.

Most modern layouts are built with flexbox and grid; skipping this lesson leaves responsive UI fragile.

You will apply Grid alignment in contexts like: Page layouts, dashboards, marketing sections, and component libraries.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Grid alignment in your own words.

Alignment classes on grid-x map to flexbox: align-middle, align-bottom, align-justify, align-spaced, and align-center control cross-axis and main-axis distribution of cells.

Common patterns

  • Logo + nav row: grid-x align-justify align-middle
  • Vertically centered hero copy beside media: align-middle on the row
  • Footer links spread edge to edge: align-justify

These mirror flexbox alignment properties. Inside a single cell, you can also use text helpers (text-center) without changing flex behavior on the row.

Important interview questions and answers

  1. Q: Where do alignment classes go—cell or grid-x?
    A: On grid-x (the flex container) for distributing cells; on inner markup for text alignment within one cell.
  2. Q: align-justify vs align-spaced?
    A: align-justify pushes first/last cells to edges with space between; align-spaced adds equal space around each cell including ends.

Self-check

  1. Which classes vertically center all cells in a row?
  2. When would align-right on grid-x beat text-right on a paragraph?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • align-middle use case?
  • justify vs align confusion?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36