CSS Grid Eigenschappen

Definiëren van Kolommen en Rijen

Gebruik de eigenschappen grid-template-columns en grid-template-rows.

Voorbeeld

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
}

Uitleg:

• Kolommen: Drie kolommen van elk 200px breed.
• Rijen: Twee rijen van elk 100px hoog.

Gebruik van de fr Eenheid

De fr (fraction) eenheid verdeelt beschikbare ruimte in fracties.

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

Uitleg:

• De totale beschikbare ruimte wordt verdeeld in 4 fracties (1 + 2 + 1).
• De eerste kolom krijgt 1/4 van de ruimte.
• De tweede kolom krijgt 2/4 (of 1/2) van de ruimte.
• De derde kolom krijgt 1/4 van de ruimte.

Grid Gap

Voeg ruimte toe tussen de grid items met grid-gap.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

Plaatsen van Grid Items

Gebruik grid-column en grid-row om items te positioneren.

Voorbeeld

.item1 {
    grid-column: 1 / 3; /* Van kolomlijn 1 tot 3 */
    grid-row: 1 / 2;    /* Van rijlijn 1 tot 2 */
}