Flexbox and Grid

Flexbox and grid put boxes side by side. In the next lesson you use them for your own website.

Quick check

Remember: block elements

10 XP

A quick question from lesson 3.6. It is optional.

Flexbox: a container and its items

Flexbox places items along one line: a row or a column. The flex container is the parent box with display: flex. Its direct children are the flex items, and they now sit side by side.

Property	Values	What it does
flex-direction	row (default), column	Items side by side, or one below the other.
justify-content	flex-start, flex-end, center, space-between, space-around	Places the items along the direction. In a row: from left to right.
align-items	stretch (default), flex-start, flex-end, center	Places the items across the direction. In a row: from top to bottom.
flex-wrap	nowrap (default), wrap	With wrap, items that do not fit move to a new line.
gap	12px	Space between the items.

Matching

Flexbox properties

Required 15 XP

Tap a declaration, then tap what it does.

Sharing the space

flex-grow shares the free space. The default is 0: the item does not grow. With 1 and 2, one item gets one share, the other two. In the slide's example, a search field takes all the free space between a logo and a profile box:

.container {
  display: flex;   /* needed: the slide forgot this line */
}
.small-box {
  flex-grow: 0;    /* stays as it is */
  width: 80px;
}
.big-box {
  flex-grow: 1;    /* takes all the free space */
}

• flex-basis is the start size, before the free space is shared: flex-basis: 200px;
• flex-shrink decides how much an item gets smaller when space is short (default 1). flex-shrink: 0; protects a photo, as below.
• flex is the short form: grow, shrink, start size. flex: 1 1 200px; starts at 200px, grows and shrinks. flex: 0 0 250px; always stays 250px. flex: 1; gives all items equal width.

<div class="container">
  <img src="profile.jpg" alt="Profile photo" class="profile-photo">
  <p class="text">A long description next to the photo...</p>
</div>

.profile-photo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;  /* the photo always stays 80px */
}
.text {
  flex-grow: 1;    /* the text takes the rest */
}

Quick check

Who grows more?

Required 10 XP

Order and one item on its own

order changes where an item appears: smaller numbers come first (default 0). It changes only what you see: screen readers and the Tab key still follow the HTML order. So use it rarely.

align-self aligns one item differently, for example one button at the bottom while the others stay at the top: align-self: flex-end; (bonus exercise below).

CSS Grid: rows and columns

Flexbox works in one direction. CSS Grid works with rows and columns at the same time. The grid container has display: grid, and its children are the grid items.

grid-template-columns: 200px 200px 200px;  /* three fixed columns */
grid-template-columns: 1fr 2fr 1fr;        /* 4 shares: the middle column is twice as wide */
grid-template-columns: repeat(3, 1fr);     /* short form: three equal columns */
grid-template-rows: 100px auto;            /* first row 100px, second as high as its content */
gap: 20px;                                 /* space between rows and columns */

fr means a fraction, a share of the free space. One slide calls this layout "Gridbox"; its name is CSS Grid.

Your turn: a header with flexbox

Guess first, then choose the four values.

Practice

Header with flexbox

Required 30 XP

This is the header of a website: the logo AK and a menu. Put them side by side with flexbox: the logo at the start, the menu at the end, both centred across the row, and allowed to wrap on a small phone.

Your turn: a skills gallery with grid

The slide's product gallery, with skills instead of products.

Practice

Skills gallery with grid

Required 30 XP

This gallery comes from the slides, with skills instead of products. Make three equal columns with repeat(), put 15px between the cards, and choose a card colour that is readable with white text.

Bonus: fix the profile buttons

An optional extra for Mission 3. It gives you a mission star.

Practice

Fix the profile buttons

25 XP

Optional extra. This menu comes from the slides about align-self. Make three fixes: the selector .btn profile matches nothing, the menu buttons are div elements instead of links, and white text on #007bff and #28a745 is too light. "My profile" should sit at the bottom.

Flex container

The parent box with display: flex.

Flex item

A direct child of a flex container.

justify-content

Places the items along the row (or column).

align-items

Places the items across the row (or column).

CSS Grid

A layout with rows and columns: display: grid.

fr

A share of the free space in a grid.

In short

• display: flex on the parent puts the children in a row; flex-wrap: wrap and gap make it work on phones.
• justify-content works along the row, align-items across it.
• flex: 1 1 200px = grow, shrink, start size. Use order rarely.
• display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; makes three equal columns.

Sources

1. MDN Web Docs (2026). Basic concepts of flexbox (container, items, main axis and cross axis).
2. MDN Web Docs (2026). justify-content and align-items.
3. MDN Web Docs (2026). flex-wrap.
4. MDN Web Docs (2026). flex (flex-grow, flex-shrink, flex-basis).
5. MDN Web Docs (2026). order (visual order only; accessibility).
6. MDN Web Docs (2026). align-self.
7. MDN Web Docs (2026). Basic concepts of grid layout (fr, gap).
8. MDN Web Docs (2026). grid-template-columns and repeat().
9. W3C WAI (2026). Understanding Success Criterion 1.3.2: Meaningful Sequence (the reading order).