CSS: grid

Zelfstudie

Grid is geen vereiste kennis voor dit vak. Deze inhoud is beschikbaar voor zelfstudie.

CSS Grid Layout is een krachtig layout-systeem dat je toelaat om complexe twee-dimensionale layouts te maken met rijen en kolommen. In tegenstelling tot Flexbox (dat één-dimensionaal is), kun je met Grid zowel horizontaal als verticaal tegelijkertijd controleren. Het is perfect voor het maken van complete page layouts en complexe componenten.

Kernconcepten

Grid Container en Grid Items

• Grid Container: Het parent element met display: grid
• Grid Items: De directe kinderen van de grid container

Grid Terminologie

• Grid Lines: De lijnen die rijen en kolommen scheiden
• Grid Tracks: De ruimte tussen twee grid lines (rij of kolom)
• Grid Cells: De ruimte tussen vier grid lines
• Grid Areas: Rechthoekige gebieden bestaande uit één of meer cells

Grid Container Properties

display: grid

.container {
    display: grid;        /* Block-level grid container */
    display: inline-grid; /* Inline-level grid container */
}

grid-template-columns & grid-template-rows

Definiëert de grootte van kolommen en rijen:

.grid-container {
    /* Expliciete groottes */
    grid-template-columns: 200px 1fr 100px;
    grid-template-rows: 100px 200px;
    
    /* Met repeat() functie */
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    
    /* Met named lines */
    grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
    
    /* Gemengde units */
    grid-template-columns: 200px 20% 1fr 2fr;
}

grid-template-areas

Definiëert named grid areas:

.grid-container {
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

/* Gebruik in grid items */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

grid-template (shorthand)

Combineert rows, columns en areas:

.grid-container {
    grid-template:
        "header header" 60px
        "sidebar main" 1fr
        "footer footer" 40px
        / 200px 1fr;
}

gap (grid-gap)

Ruimte tussen grid items:

.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 */
}

justify-items

Uitlijning van items binnen hun cells (horizontaal):

.grid-container {
    justify-items: start;   /* Items aan de linkerkant */
    justify-items: end;     /* Items aan de rechterkant */
    justify-items: center;  /* Items gecentreerd */
    justify-items: stretch; /* Items vullen de cel (standaard) */
}

align-items

Uitlijning van items binnen hun cells (verticaal):

.grid-container {
    align-items: start;     /* Items aan de bovenkant */
    align-items: end;       /* Items aan de onderkant */
    align-items: center;    /* Items gecentreerd */
    align-items: stretch;   /* Items vullen de cel (standaard) */
}

place-items (shorthand)

Combineert align-items en justify-items:

.grid-container {
    place-items: center;        /* Beide center */
    place-items: start end;     /* align-items justify-items */
}

justify-content

Uitlijning van de hele grid binnen de container (horizontaal):

.grid-container {
    justify-content: start;         /* Grid aan de linkerkant */
    justify-content: end;           /* Grid aan de rechterkant */
    justify-content: center;        /* Grid gecentreerd */
    justify-content: stretch;       /* Grid vult container */
    justify-content: space-around;  /* Gelijke ruimte rondom kolommen */
    justify-content: space-between; /* Gelijke ruimte tussen kolommen */
    justify-content: space-evenly;  /* Gelijke ruimte tussen en rondom */
}

align-content

Uitlijning van de hele grid binnen de container (verticaal):

.grid-container {
    align-content: start;         /* Grid aan de bovenkant */
    align-content: end;           /* Grid aan de onderkant */
    align-content: center;        /* Grid gecentreerd */
    align-content: stretch;       /* Grid vult container */
    align-content: space-around;  /* Gelijke ruimte rondom rijen */
    align-content: space-between; /* Gelijke ruimte tussen rijen */
    align-content: space-evenly;  /* Gelijke ruimte tussen en rondom */
}

place-content (shorthand)

Combineert align-content en justify-content:

.grid-container {
    place-content: center;      /* Beide center */
    place-content: start end;   /* align-content justify-content */
}

grid-auto-columns & grid-auto-rows

Grootte van implicit tracks:

.grid-container {
    grid-auto-columns: 60px;     /* Impliciete kolommen zijn 60px */
    grid-auto-rows: minmax(60px, auto); /* Minimum 60px, groeit met content */
}

grid-auto-flow

Controleert hoe auto-placed items worden geplaatst:

.grid-container {
    grid-auto-flow: row;        /* Vul rijen eerst (standaard) */
    grid-auto-flow: column;     /* Vul kolommen eerst */
    grid-auto-flow: row dense;  /* Probeer gaten te vullen */
    grid-auto-flow: column dense;
}

Grid Item Properties

grid-column-start & grid-column-end

Positionering van items:

.grid-item {
    grid-column-start: 1;       /* Start op kolom lijn 1 */
    grid-column-end: 3;         /* Eindigt op kolom lijn 3 */
    
    /* Met named lines */
    grid-column-start: sidebar-start;
    grid-column-end: main-end;
    
    /* Met span */
    grid-column-start: 2;
    grid-column-end: span 3;    /* Besla 3 kolommen */
}

grid-row-start & grid-row-end

.grid-item {
    grid-row-start: 1;
    grid-row-end: 3;
    
    /* Met span */
    grid-row-start: span 2;     /* Besla 2 rijen */
    grid-row-end: -1;           /* Tot de laatste lijn */
}

grid-column & grid-row (shorthand)

.grid-item {
    grid-column: 1 / 3;         /* Van lijn 1 tot lijn 3 */
    grid-column: 1 / span 2;    /* Start op 1, besla 2 kolommen */
    grid-column: sidebar;       /* Gebruik named area */
    
    grid-row: 2 / 4;
    grid-row: 1 / -1;           /* Van eerste tot laatste lijn */
}

grid-area

Shorthand voor alle positionering, of voor named areas:

.grid-item {
    /* Met lijnnummers: row-start / column-start / row-end / column-end */
    grid-area: 1 / 1 / 3 / 3;
    
    /* Met named area */
    grid-area: header;
}

justify-self

Uitlijning van individueel item (horizontaal):

.grid-item {
    justify-self: start;    /* Item aan linkerkant van cel */
    justify-self: end;      /* Item aan rechterkant van cel */
    justify-self: center;   /* Item gecentreerd in cel */
    justify-self: stretch;  /* Item vult cel horizontaal */
}

align-self

Uitlijning van individueel item (verticaal):

.grid-item {
    align-self: start;      /* Item aan bovenkant van cel */
    align-self: end;        /* Item aan onderkant van cel */
    align-self: center;     /* Item gecentreerd in cel */
    align-self: stretch;    /* Item vult cel verticaal */
}

place-self (shorthand)

Combineert align-self en justify-self:

.grid-item {
    place-self: center;         /* Beide center */
    place-self: start end;      /* align-self justify-self */
}

Grid Functions en Units

fr (fractional unit)

.grid-container {
    /* 1fr = 1 deel van beschikbare ruimte */
    grid-template-columns: 1fr 2fr 1fr; /* 25% 50% 25% */
    grid-template-columns: 200px 1fr;   /* 200px vaste breedte, rest flexibel */
}

repeat()

.grid-container {
    grid-template-columns: repeat(4, 1fr);              /* 4 gelijke kolommen */
    grid-template-columns: repeat(auto-fit, 200px);     /* Automatisch aantal 200px kolommen */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive kolommen */
}

minmax()

.grid-container {
    grid-template-columns: minmax(200px, 1fr) 300px;    /* Min 200px, max 1fr */
    grid-template-rows: repeat(3, minmax(100px, auto)); /* Min 100px, groeit met content */
}

fit-content()

.grid-container {
    grid-template-columns: fit-content(300px) 1fr;      /* Niet groter dan content of 300px */
}