LU04.A03 - Grid

1. What does the CSS property display: grid?
2. What is the difference between a grid container and a grid item?
3. What do the units fr and px stand for in CSS Grid?
4. How many dimensions does CSS Grid support?
5. What happens if you use grid-template-columns: 1fr 2fr set?
6. What is the short form for grid-column-start and grid-column-end looks like?

HTML

<!-- HTML -->
<div class="grid">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
  <div>Box 5</div>
  <div>Box 6</div>
</div>

1. Set display: grid to .grid
2. Create 3 columns and 2 rows
3. Give each box a different background colour

1. Create a grid with 3 columns: The first with 200px, the second with 1fr, the third with 2fr
2. Insert three grid items
3. Observe how the column widths change when you adjust the window size

1. Create a 4×4 grid
2. Insert an element that occupies columns 2 to 4 and rows 1 to 2
3. Use grid-column-start, grid-column-end, grid-row-start, grid-row-end

+---------+------------+
| header  |  header    |
+---------+------------+
| nav     |  content   |
+---------+------------+
| footer  |  footer    |
+---------+------------+

1. Create the layout using grid-template-areas