====== LU04.A03 - Grid ======

===== Task 1: Theory ======

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


===== Task 2: Simple box placement =====

==== Starting position ====
**HTML**
<code 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>
</code>

==== Task ====
  - Set ''display: grid'' to ''.grid''
  - Create 3 columns and 2 rows
  - Give each box a different background colour

===== Task 3: Behaviour of a grid with different columns =====

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

===== Task 4: Targeted placement of elements =====

==== Task ====
  - Create a 4x4 grid
  - Insert an element that occupies columns 2 to 4 and rows 1 to 2
  - Use ''grid-column-start'', ''grid-column-end'', ''grid-row-start'', ''grid-row-end''

===== Task 5: Create grid template =====

<code>
+---------+------------+
| header  |  header    |
+---------+------------+
| nav     |  content   |
+---------+------------+
| footer  |  footer    |
+---------+------------+
</code>

==== Task definition ====
  - Create the layout using ''grid-template-areas''