Grid – Jof Neuhaus

In html/css kun je de layout van elementen op verschillende manieren opbouwen. In het begin van het internet gebruikte men tables voor het uitlijnen, daarna kwamen floats, positioning en inline-blocks. Een andere layout-tool is flexbox en sinds 2017 is daar grid bijgekomen.

Intro123Theorie

Een grid is simpelweg een raster van vakjes verdeeld in rijen en kolommen. De content van een webpagina zal een plek krijgen in het grid, in een of meerdere vakjes.

grid cell: een gebied van één rij en één kolom
grid track: een gebied van meerdere rijen of kolommen
grid area: een gebied van meerdere rijen en kolommen

In html bouw je een grid als volgt:

<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5/div>
   <div class="item">6</div>
</div>

Je ziet hier een div met daarin zes andere divs. Let op:

De ‘container’ is de parent van de ‘items’.
De ‘items’ zijn children van de ‘container’.

De CSS die de children in een grid zet pas je toe op de parent:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

De code grid-template-columns: auto auto auto; zegt het volgende: maak drie kolommen in het grid en verdeel de beschikbare breedte automatisch over deze drie kolommen.

Wanneer je een site ontwerpt houdt je natuurlijk rekening met de manier waarop deze gebouwd gaat worden; in dit geval via de methode grid.

Zoek een website uit die op een grid zou kunnen zijn ontworpen.
1. Overleg je keuze even met de docent, zodat je niet iets kiest dat onbruikbaar is voor deze oefening.
2. Kies niet hetzelfde als je buurman/vrouw.
Maak hiervan een screenshot en open dit in Photoshop.
Maak met behulp van een Black/White Adjustment Layer (aanpassingslaag) het ontwerp zwartwit.
Maak met behulp van een Hue/Saturation Adjustment Layer het ontwerp lichtgrijs.
Teken nu in lagen erboven hoe het ontwerp op een grid in cells, tracks of area’s kan worden verdeeld.

Tip: gebruik de Inspector in je browser om de pagina te analyseren.

Laten we eens een stukje coderen. Bestudeer eerst het onderstaande voorbeeld:

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

Je ziet hoe alle children hier een unieke class hebben ‘item#’. In de CSS krijgen deze allemaal een naam mee voor grid-area die ze innemen.

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

In de CSS hierbobven zie je ook hoe de container in rijen en kolommen wordt verdeeld door de namen van de grid-area’s te benoemen. Dit geeft het volgende resultaat: