Web Development · Beginner level

Beginner level · Module 2: CSS and Responsive Layout · Lesson 2 of 3

Flexbox and Grid Layouts

Arrange content in rows and columns with Flexbox for one dimension and Grid for two.

In this lesson you will

  • Build one-dimensional layouts with Flexbox
  • Build two-dimensional layouts with CSS Grid

Key concepts

display: flexjustify-content and align-itemsdisplay: gridgrid-template-columns and gap

The lesson

Flexbox arranges items in a row or column. On the container, display: flex, justify-content controls spacing along the main axis, align-items aligns across it and gap adds space between items. It suits navigation bars, button groups and card contents.

Grid arranges items in rows and columns at once. grid-template-columns: repeat(3, 1fr) creates three equal columns, and repeat(auto-fit, minmax(16rem, 1fr)) creates as many columns as fit, which is responsive without a single media query.

Use Grid for page and card layouts and Flexbox for arranging items inside components. Both work with the source order, so the HTML stays logical for screen readers.

Step by step

  1. Build a navigation bar with Flexbox.
  2. Lay out service cards with Grid and gap.
  3. Make the card grid responsive with auto-fit and minmax.
  4. Align content inside a card with Flexbox.

Practice activity

Lay out the services section and the navigation of the organisation site with Grid and Flexbox.

Expected result: The navigation is a tidy row on wide screens and the services form a grid that adapts to the screen width.

Check your understanding

  1. Which layout tool suits a two-dimensional page layout?

    Show answer

    CSS Grid.

  2. What does repeat(auto-fit, minmax(16rem, 1fr)) do?

    Show answer

    Creates as many columns of at least 16rem as fit, sharing the space.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.