GRID

• ICT
• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

We maken gebruik van Lessonup.

Quizes kunnen gemaakt worden "online" met de telefoon

of door het antwoord op een papier op te schrijven.

Wat gaan we doen?

We gaan aan de slag met Grid!

Hoe werkt CSS Grid

CSS Grid is een redelijk nieuwe CSS module die het mogelijk
maakt om in een soort raster een lay-out te maken.

Grid kolommen

We zullen nu in de CSS code aangeven dat de class grid-container getoond moet
worden als een grid. Dit doen we als volgt:

• Altijd eerst aangeven dat je grid wilt gaan toepassen--> display:grid;
  
  

Grid kolom eigenschap:

• grid-template-columns: auto auto auto
• grid-template-columns: repeat(4, 1fr);
• grid-template-columns: 1fr 1fr 1fr 100px;

Grid rijen

Naast de eigenschap grid-template-columns kun je ook de eigenschap grid-template-rows gebruiken. 

• Grij rijen --> grid-template-rows:

Ruimte tussen de grid items

Zoals we het tot nu toe hebben gemaakt, staan de items in het grid meteen tegen elkaar aan. Dit kun je aanpassen met de onderstaande eigenschap.

• Ruimte aanpassen --> grid-gap:

Grid items plaatsen in het grid

Je kunt grid items in het grid plaatsen. Het maakt daarbij niet uit in welke volgorde een item genoteerd is in de HTML code. De volgende eigenschappen zijn van belang:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Bij een grid met drie kolommen heb je dus 4 kolom rijen:

Voorbeeld

Om nu grid item 1 rechts te plaatsen, zetten we de eigenschap grid-column-start: 3;

Wat geef je aan in CSS om grid in de container te tonen?

1. display: columns;
2. display: grid;
3. display: rows;
4. display: none;

Welk onderstaande CSS eigenschap maakt drie kolommen aan?

1. grid-template-columns: auto auto auto
2. grid-template-columns: repeat(4, 1fr)
3. grid-template-columns: 100%
4. grid-template-columns: repeat(3, 25%

Welke eigenschappen zijn van belang om grid te plaatsen?

1. grid-column-start
2. grid-row-end
3. grid-column-end
4. grid-row-start

Samenvatting

• Grid maakt een raster lay-out mogelijk
• Grid wordt aangegeven met --> display: grid;
• Grid kolom eigenschap --> grid-template-columns: auto auto auto;
• Grid rij eigenschap --> grid-template-rows: 200px 100px 200px;
• Ruimte tussen kolommen/rijen--> grid-gap: 20px;
  
  

Grid items plaatsen met de volgende eigenschappen:

• grid-column-start: 3;
• grid-column-end: 4;
• grid-row-start: 2;
• grid-row-end: 4;