CSS Grid Layout

HTML/CSS

Basis

CSS Grid Layout

Doel

Met display: grid kunnen we relatief gemakkelijk een visueel grid creëren, bv. onderstaande

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Flexbox of Grid?

In principe kan je de meeste grid-achtige layouts met zowel display: flex als display: grid bekomen.

Als regel neem je meestal de volgende:

  • is je layout twee dimensionaal (horizontaal EN verticaal)? Dan gebruik je grid.
  • Is het één dimensionaal (horizontaal OF verticaal)? Dan gebruik je flexbox

Oefening

CSS Grid Layout

CSS Grid ontdekken

Aangezien CSS Grid veel instellingen heeft waardoor je heel veel variaties hebt, gaan we het samen klassikaal ontdekken.

 

Start daarom met het maken van een nieuw project met volgende structuur. Link het CSS bestand.

CSS Grid ontdekken

Vul nu het CSS en HTML bestand aan:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

.grid {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.grid li {
  background: #55ddbd;
  padding: 1rem;
  border: 2px solid #0e4538;
}
<body>
    <ul class="grid">
        <li>Box</li>
        <li>Box</li>
        <li>Box</li>
        <li>Box</li>
        <li>Box</li>
        <li>Box</li>
        <li>Box</li>
        <li>Box</li>
        <li>Box</li>
    </ul>
</body>

CSS Grid ontdekken

Open het project in de browser

CSS Grid ontdekken

Pas de klasse .grid als volgt aan

.grid {
  margin: 0;
  padding: 0;
  list-style-type: none;

  display: grid;
}

Kijk in de browser. Er zal visueel niets gewijzigd zijn. Om het grid te laten werken hebben we nog enkele properties nodig.

Columns

Voeg volgende lijn toe aan .grid

.grid {
  ...
  grid-template-columns: 10vw 30vw;
}

Wat is er gewijzigd? 

Gap

Voeg volgende lijn toe aan .grid en bekijk het resultaat

.grid {
  ...
  gap: 1rem;
}

Net zoals bij een flexbox kunnen we de gap property gebruiken.

Aligneren

Ook align-items en justify-content kunnen we op onze .grid klasse gebruiken. Probeer deze uit met verschillende combinaties.

Waarom heeft justify-content een effect en align-items niet?

Columns / rows

Wijzig nu de waarde van grid-template-columns

.grid {
  ...
  grid-template-columns: 1fr 2fr 1fr;
}

Vergelijk het voor en na resultaat

Columns / rows

Met een fr (fraction) waarde kunnen we gemakkelijk een relatieve waarde creëren binnen een grid

.grid {
  grid-template-columns: 1fr 2fr 1fr;
}

Hier zeggen we dat:

  • er drie kolommen zijn (want drie waarden)
  • de tweede kolom dubbel zo breed moet zijn als de eerste en de laatste

Columns / rows

Voeg nu onderstaande toe aan .grid

.grid {
  ...
  grid-template-rows: 50px 100px 150px;
}

Vergelijk het voor en na resultaat

Columns / rows

Wijzig grid-template-rows en voeg een height toe

.grid {
  ...
  grid-template-rows: 3fr 5fr 1fr;
  height: 100vh;
}

Vergelijk het voor en na resultaat.

Columns / rows

Je kan dus grid-template-rows en grid-template-columns gebruiken om de rows en columns in te stellen.

 

Probeer nu zelf grid-template-rows in te stellen zodat je 3 kolommen hebt die even breed zijn.

Repeat

Vermoedelijk heb je dit als volgt geschreven:

.grid {
  ...
  grid-template-rows: 1fr 1fr 1fr;
}

Dit kan nog korter! Binnen grid kunnen we gebruik maken van repeat

.grid {
  ...
  grid-template-rows: repeat(3, 1fr);
}

Pas 3 aan naar een ander getal. Wat is het resultaat? Pas daarna terug aan naar 3.

Span

Wijzig nu ook je HTML bestand. Voeg een klasse toe aan het tweede list item.

<ul class="grid">
  <li>Box</li>
  <li class="special">Box</li>
  <li>Box</li>
  <li>Box</li>
  <li>Box</li>
  <li>Box</li>
  <li>Box</li>
  <li>Box</li>
  <li>Box</li>
</ul>

Span

Voeg deze klasse in CSS toe

.special {
  background: #09c095;
  grid-column: span 2;
}

Onderzoek het resultaat met inspect element. Wat is er gewijzigd? Hoe toont dit zich via inspect element? Bekijk zeker ook de klasse .grid via inspect element

Span

Voeg het volgende toe

.special {
  ...
  grid-row: span 2;
}

Wat is er gewijzigd? Pas het getal 2 aan naar een andere waarde.

Responsive grid

Verwijder de klasse .special uit CSS.

Pas bij .grid de columns aan als volgt:

.grid {
  ...
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

Bekijk het resultaat in de browser. Maak je scherm eerst zo smal als je kan en dan zo breed als je kan. 

Responsive grid

Met grid kunnen we heel snel een responsive grid maken dat zich aanpast naar de breedte van het scherm, zonder een of meerdere media query te schrijven. Handig!

CSS Grid Layout

By Lecturer GDM

CSS Grid Layout

Pseudo elements and positioning

  • 281

More from Lecturer GDM