# 05. lay-out met grid

## grid intro

Lay-outs zijn gemakkelijk te maken met behulp van rasters (grids). Tot nu toe beschikte het web niet over een raster. Er werden daarom allerlei methoden en hacks uitgeprobeerd om een webpagina in een raster weer te geven. Het begon met op tabellen gebaseerde lay-outs, gevolgd door op float gebaseerde lay-outs. Maar dit zijn enkel nepoplossingen omdat **tabellen en float niet bedoeld waren om lay-out**s te maken.

{% embed url="<https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=b975fc8b-17c6-4e6f-9f06-ac71010f03fe>" %}
Kennisclip over grid
{% endembed %}

Lay-out met grid biedt een **raster-gebaseerd layout-systeem met rijen en kolommen**, waardoor het gemakkelijker wordt om webpagina's te ontwerpen zonder gebruik te maken van floats en positionering.

{% embed url="<https://codepen.io/APwebtechnologie/pen/PozXMRW>" %}

info [box-sizing: border-box | content-box (default)](https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing)

### grid-elementen

Een grid-lay-out heeft een *parent* nodig met een **display: grid** of **display: inline-grid**\
Alle directe *children* binnen een grid-container worden automatisch **grid-elementen.**<br>

### grid columns

De **verticale lijnen** van de grid-elementen worden **kolommen** (grid columns) genoemd.

![](https://2428582303-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnWOlafbkx3lC-AgBu0%2F-MM-y2f1NODgxyZ__HfP%2F-MM04xkfQFTqlxZ_l4OH%2Fimage.png?alt=media\&token=b6aac4a9-3e2c-47ca-931f-4a06498cf71c)

### grid-rows

De **horizontale lijnen** van de grid-elementen worden **rijen** (grid rows) genoemd.

![](https://2428582303-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnWOlafbkx3lC-AgBu0%2F-MM-y2f1NODgxyZ__HfP%2F-MM05LR1sH7IezDr1nfQ%2Fimage.png?alt=media\&token=56d9cc20-b534-4d7b-8df6-93cf80adc340)

### grid-gaps

De **spaties of witruimte** tussen elke kolom of rij worden **gaps** genoemd. Gebruik de CSS-eigenschap "gap" om dit aan te passen.

![](https://2428582303-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnWOlafbkx3lC-AgBu0%2F-MM-y2f1NODgxyZ__HfP%2F-MM05oKkcf-8B4c7TdJU%2Fimage.png?alt=media\&token=7de985fc-00a6-481c-aba1-6e38cb206129)

{% embed url="<https://codepen.io/APwebtechnologie/pen/JjKxPLb>" %}

### grid-lines

De lijnen tussen kolommen worden **kolomlijnen** (column lines) genoemd. \
De lijnen tussen rijen worden **rijlijnen** (row lines) genoemd.\
Naar deze lijnen wordt verwezen bij het plaatsen van een grid-item binnen een grid-container.

![](https://2428582303-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnWOlafbkx3lC-AgBu0%2F-MM09h0nm7ee78lnRXt2%2F-MM0Da93YJc7lQl2xiAC%2Fimage.png?alt=media\&token=813edb5a-aee8-42ef-a6a8-80bb6a4643f3)

{% embed url="<https://codepen.io/APwebtechnologie/pen/VwjgwZX>" %}

{% embed url="<https://codepen.io/APwebtechnologie/pen/NWroKEJ>" %}

Het bovenstaande voorbeeld geeft een raster met 3 kolommen waarbij de rijen minimaal 100px zijn.<br>

## grid container

Om ervoor te zorgen dat een HTML-element zich gedraagt ​​als een grid-container moet de display-eigenschap ingesteld worden op **grid** of **inline-grid**. Grid-containers bestaan ​​uit grid-items die in kolommen en rijen worden geplaatst.

try it yourself:<https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_container>

extra info: artikel [Understanding CSS Grid: Creating A Grid Container](https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/)<br>

### grid-template-columns

De **grid-template-columns** bepaalt het aantal kolommen in een grid en de **breedte van elke kolom**. Bij een door spaties gescheiden lijst, definieert elke waarde de breedte van de respectieve kolom. Als het grid 4 kolommen bevat, moet telkens de breedte van de 4 kolommen gedefinieerd worden. Indien alle kolommen dezelfde breedte moeten hebben, wordt er gebruik gemaakt van `auto`.

{% embed url="<https://codepen.io/APwebtechnologie/pen/mdEvyOe>" %}

try it yourself:<https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-template-columns2><br>

### grid-template-rows

De **grid-template-rows** definieert de **hoogte van elke rij**. Bij een door spaties gescheiden lijst, definieert elke waarde de breedte van de respectieve rij.&#x20;

{% embed url="<https://codepen.io/APwebtechnologie/pen/eYzxmvj>" %}

try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-template-rows><br>

### justify-content

De **justify-content** wordt gebruikt om het hele grid binnen de container uit te lijnen, waarbij justify-content de volgende waarden kan aannemen:

justify-content: **space-evenly | space-around | space-between | center | start | end**

```css
.grid-container {
  display: grid;
  justify-content: space-evenly;
}
```

try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_justify-content_space-evenly><br>

### align-content

De **align-content** wordt gebruikt om het hele grid binnen de container **verticaal** uit te lijnen, waarbij align-content de volgende waarden kan aannemen:

align-content: **space-evenly | space-around | space-between | center | start | end**

```css
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}
```

try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center>

## grid item

### child elements (items)

Een grid-container bevat grid-items. Standaard heeft een container één grid-item voor elke kolom, in elke rij, maar grid-items kunnen zo opgemaakt worden dat ze meerdere kolommen en/of rijen beslaan.

### grid-column

De **grid-column** definieert op welke kolom(men) een item moet worden geplaatst. Er kan bepaald worden waar het item begint en waar het eindigt. Enkele voorbeelden:&#x20;

* .item1 { grid-column: 1 / 5; } item 1 start in kolom 1 en eindigt voor kolom 5
* .item1 { grid-column: 1 / span 3; } item 1 start in kolom 1 en voegt 3 kolommen samen
* .item2 { grid-column: 2 / span 3; } item 1 start in kolom 2 en voegt 3 kolommen samen

try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-column2><br>

### grid-row

De **grid-row** definieert op welke rij(en) een item moet worden geplaatst. Er kan bepaald worden waar het item begint en waar het eindigt. Enkele voorbeelden:&#x20;

* .item1 { grid-row: 1 /4; } \
  \=> item 1 start in rij 1 en eindigt voor rij 4
* .item1 { grid-column: 1 / span 2; } \
  \=> item 1 start in rij 1 en voegt 2 rijen samen

try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-row2><br>

### grid-area

De **grid-area** kan worden gebruikt als een verkorte eigenschap voor de volgende 4 eigenschappen **grid-row-start, grid-column-start, grid-row-end** en **grid-column-end**. Enkele voorbeelden:&#x20;

* .item1 { grid-area: 1 / 2 / 5 / 6;  } \
  \=> item 1 start op rijlijn 1 en kolomlijn 2, en eindigt op rijlijn 5 en kolomlijn 6
* .item1 { grid-area: 2 / 1 / span 2 / span 3; }\
  \=> item 1 start op rijlijn 2 en kolomlijn 1, en omvat 2 rijen en 3 kolommen

try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-area1>\
try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-area2><br>

### grid-template-areas

{% embed url="<https://ap.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=b975fc8b-17c6-4e6f-9f06-ac71010f03fe>" %}
grid-template-areas vanaf 13' 35"
{% endembed %}

De eigenschap **grid-area** kan ook worden gebruikt om **namen toe te wijzen aan grid-items**. Door alle items correct te benoemen en toe te wijzen aan een grid-area kan een kant-en-klare grid-template gemaakt worden voor een webpagina.

```css
header {grid-area: header;}
nav {grid-area: menu;}
main {grid-area: main;}
aside {grid-area: right;}
footer {grid-area: footer;}

body {
  display: grid;
  grid-template-areas:
    'header header header header header header' /* 6fr header */
    'menu   main   main   main   right  right' /* 1fr menu | 3fr main | 2 right */ 
    'menu   footer footer footer footer footer'; /* 1fr menu | 5fr footer */
    }
```

{% embed url="<https://codepen.io/APwebtechnologie/pen/PozXMRW>" %}

extra info: artikel [Understanding CSS Grid: Grid Template Areas](https://www.smashingmagazine.com/understanding-css-grid-template-areas/)

### ordenen

Door te werken met grid kunnen de grid-items overal geplaatst worden waar je maar wil. Het eerste item in de HTML-code hoeft dus niet als eerste item in het raster te verschijnen.

```css
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
```

try it yourself: <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_flexible_order>

```css
@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}
```

try it yourself:n <https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_flexible_order2><br>

## video: single-line CSS layouts voor o.a. flex en grid

{% embed url="<https://www.youtube.com/watch?v=qm0IfG1GyZU>" %}
10 modern layouts in 1 line of CSS
{% endembed %}
