CSS Grid

WEB ESSENTIALS

Wat is CSS grid?

Grid

Wanneer flexbox te ingewikkeld wordt, kan je ook gebruik maken van CSS grid. Hiermee kan je complexe en flexibele layouts samenstellen via een grid dat je zelf instelt.

RECAP

Grid

Via CSS stel je eerst een grid in, je kiest het aantal rijen
en kolommen

Grid

Daarna bepaal je hoeveel rijen en kolommen bepaalde items mogen innemen

Grid basics

Terminologie

Grid toevoegen

Net zoals bij flexbox, voegen we grid toe op het parent-element van de items die je wil uitlijnen.

.parent {
  display: grid
}
<section class="parent">
  <article>...</article>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</section>

Grid container & items

Het parent-element noemen we de grid-container, de children worden grid-items.

Grid bepalen

Nadat grid werd toegevoegd, moet je nog instellen hoe het grid ingedeeld is. Daarbij bepaal je hoeveel rijen en kolommen jouw grid bevat.

 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto 10rem;
}

Grid-template-columns

Met grid-template-columns bepaal je hoeveel kolommen het grid heeft, én hoe breed elke kolom is.

  • Elke waarde die je meegeeft creëert een kolom met die breedte
.parent {
  display: grid;
  
  /* een grid met 3 kolommen*/
  grid-template-columns: 10rem 4rem 20rem;
}

Grid-template-columns

Er zijn verschillende manieren om de kolombreedte in te stellen:

  • vaste waarde: bijv. in rem
  • fraction (fr): verdeelt de (overige) ruimte al dan niet gelijk
  • auto: kolombreedte past zich aan de breedte van het grid-item
  • repeat: wanneer kolommen dezelfde breedte hebben
.parent {
  grid-template-columns: 10rem 4rem 20rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 2fr 1fr 4fr;
  grid-template-columns: auto 1fr 10rem 1fr;
  grid-template-columns: repeat(3, 1fr);
}

🤓 Tip

Gebruik fraction om je kolommen responsive te maken. Elke kolom past zich aan aan de breedte van het scherm

Grid-template-rows

Met grid-template-rows bepaal je hoeveel rijen jouw grid heeft, én hoe hoog elke rij is. Ook hier kan je verschillende waardes gebruiken.

.parent {
  display: grid;

  grid-template-rows: 20rem 40rem;
  grid-template-rows: 1fr auto 20rem;
  grid-template-rows: repeat(4, 100px);
}

Gap

Net zoals bij flexbox, kan je met gap ruimte toevoegen tussen de rijen en kolommen:

  • gap: gelijke ruimte tussen rijen en kolommen
  • row-gap: specifiek instellen tussen de rijen
  • column-gap: specfiek instellen tussen de kolommen
.grid-container {
    gap: 1rem;        /* Gelijke ruimte tussen rijen en kolommen */
    row-gap: 1rem;    /* Ruimte tussen rijen */
    column-gap: 2rem; /* Ruimte tussen kolommen */
    gap: 1rem 2rem;   /* row-gap column-gap */
}

Grid items uitlijnen

Wanneer je het grid hebt ingesteld, kan je bepalen hoe

de items zich uitlijnen op dat grid. Standaard wordt elk item in een cell geplaatst.

Grid items uitlijnen

Via grid-column-start en grid-column-end kan je items meerdere kolommen laten innemen

.grid-item {
    grid-column-start: 1;       /* Start op kolom lijn 1 */
    grid-column-end: 3;         /* Eindigt op kolom lijn 3 */
}

Grid items uitlijnen

Via grid-row-start en grid-row-end kan je items meerdere rijen laten innemen.

.grid-item {
    grid-column-start: 1;       /* Start op kolom lijn 1 */
    grid-column-end: 3;         /* Eindigt op kolom lijn 3 */
  	grid-row-start: 1;			/* Start op rij lijn 1 */ 
    grid-row-end: 3; 			/* Start op rij lijn 3 */
}

Grid advanced

Grid advanced

In deze cursus bekijken we enkel de basisprincipes, maar er zijn nog veel meer mogelijkheden met CSS grid. Wie zich verder wil verdiepen, kan hier terecht: