×

css · level 2 · unit 3 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

places children in rows and columns.

Flexbox thinks about one line at a time. A grid thinks in rows and columns together, like a chessboard. Switch it on with display: grid on the parent.

grid-template-columns lists the width of each column, which is one . 80px 80px 80px makes three columns of 80px. The children fill the cells one after another, left to right.

When a row is full, the next child starts a new row. gap works in a grid too, between rows and between columns.

<div class="week">
  <div class="day">Mon</div>
  <div class="day">Tue</div>
  <div class="day">Wed</div>
  <div class="day">Thu</div>
  <div class="day">Fri</div>
  <div class="day">Sat</div>
</div>
.week {
  display: grid;
  grid-template-columns: 80px 80px 80px;
  gap: 8px;
}
.day {
  padding: 12px;
  background-color: lightblue;
}

Press show my page to see it here.

Add a fourth 80px and the six days rearrange into rows of four.