grid
grid intro
Lay-outs zijn gemakkelijk te maken met behulp van rasters (grids). Tot nu toe beschikte het web niet over een raster. Er werden daarom allerlei methoden en hacks uitgeprobeerd om een webpagina in een raster weer te geven. Het begon met op tabellen gebaseerde lay-outs, gevolgd door op float gebaseerde lay-outs. Maar dit zijn enkel nepoplossingen omdat tabellen en float niet bedoeld waren om lay-outs te maken.
Lay-out met grid biedt een raster-gebaseerd layout-systeem met rijen en kolommen, waardoor het gemakkelijker wordt om webpagina's te ontwerpen zonder gebruik te maken van floats en positionering.
info box-sizing
grid-elementen
Een grid-lay-out heeft een parent nodig met een display: grid of display: inline-grid
Alle directe children binnen een grid-container worden automatisch grid-elementen.\
grid columns
De verticale lijnen van de grid-elementen worden kolommen (grid columns) genoemd.
grid-rows
De horizontale lijnen van de grid-elementen worden rijen (grid rows) genoemd.
grid-gaps
De spaties of witruimte tussen elke kolom of rij worden gaps genoemd. Gebruik de CSS-eigenschap "gap" om dit aan te passen.
grid-lines
De lijnen tussen kolommen worden kolomlijnen (column lines) genoemd.
De lijnen tussen rijen worden rijlijnen (row lines) genoemd.
Naar deze lijnen wordt verwezen bij het plaatsen van een grid-item binnen een grid-container.
Het bovenstaande voorbeeld geeft een raster met 3 kolommen waarbij de rijen minimaal 100px zijn.\
grid container
Om ervoor te zorgen dat een HTML-element zich gedraagt als een grid-container moet de display-eigenschap ingesteld worden op grid of inline-grid. Grid-containers bestaan uit grid-items die in kolommen en rijen worden geplaatst.
grid-template-columns
De grid-template-columns bepaalt het aantal kolommen in een grid en de breedte van elke kolom. Bij een door spaties gescheiden lijst, definieert elke waarde de breedte van de respectieve kolom. Als het grid 4 kolommen bevat, moet telkens de breedte van de 4 kolommen gedefinieerd worden. Indien alle kolommen dezelfde breedte moeten hebben, wordt er gebruik gemaakt van auto.
grid-template-rows
De grid-template-rows definieert de hoogte van elke rij. Bij een door spaties gescheiden lijst, definieert elke waarde de breedte van de respectieve rij.
justify-content
De justify-content wordt gebruikt om het hele grid binnen de container uit te lijnen, waarbij justify-content de volgende waarden kan aannemen:
justify-content: space-evenly | space-around | space-between | center | start | end
.grid-container {
display: grid;
justify-content: space-evenly;
}
align-content
De align-content wordt gebruikt om het hele grid binnen de container verticaal uit te lijnen, waarbij align-content de volgende waarden kan aannemen:
align-content: space-evenly | space-around | space-between | center | start | end
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
grid item
child elements (items)
Een grid-container bevat grid-items. Standaard heeft een container één grid-item voor elke kolom, in elke rij, maar grid-items kunnen zo opgemaakt worden dat ze meerdere kolommen en/of rijen beslaan.
grid-column
De grid-column definieert op welke kolom(men) een item moet worden geplaatst. Er kan bepaald worden waar het item begint en waar het eindigt. Enkele voorbeelden:
- .item1 { grid-column: 1 / 5; } item 1 start in kolom 1 en eindigt voor kolom 5
- .item1 { grid-column: 1 / span 3; } item 1 start in kolom 1 en voegt 3 kolommen samen
- .item2 { grid-column: 2 / span 3; } item 1 start in kolom 2 en voegt 3 kolommen samen
grid-row
De grid-row definieert op welke rij(en) een item moet worden geplaatst. Er kan bepaald worden waar het item begint en waar het eindigt. Enkele voorbeelden:
- .item1 { grid-row: 1 /4; }
=> item 1 start in rij 1 en eindigt voor rij 4 - .item1 { grid-column: 1 / span 2; }
=> item 1 start in rij 1 en voegt 2 rijen samen
grid-area
De grid-area kan worden gebruikt als een verkorte eigenschap voor de volgende 4 eigenschappen grid-row-start, grid-column-start, grid-row-end en grid-column-end. Enkele voorbeelden:
- .item1 { grid-area: 1 / 2 / 5 / 6; }
=> item 1 start op rijlijn 1 en kolomlijn 2, en eindigt op rijlijn 5 en kolomlijn 6 - .item1 { grid-area: 2 / 1 / span 2 / span 3; }
=> item 1 start op rijlijn 2 en kolomlijn 1, en omvat 2 rijen en 3 kolommen
grid-template-areas
De eigenschap grid-area kan ook worden gebruikt om namen toe te wijzen aan grid-items. Door alle items correct te benoemen en toe te wijzen aan een grid-area kan een kant-en-klare grid-template gemaakt worden voor een webpagina.
header {grid-area: header;}
nav {grid-area: menu;}
main {grid-area: main;}
aside {grid-area: right;}
footer {grid-area: footer;}
body {
display: grid;
grid-template-areas:
'header header header header header header' /* 6fr header */
'menu main main main right right' /* 1fr menu | 3fr main | 2 right */
'menu footer footer footer footer footer'; /* 1fr menu | 5fr footer */
}
ordenen
Door te werken met grid kunnen de grid-items overal geplaatst worden waar je maar wil. Het eerste item in de HTML-code hoeft dus niet als eerste item in het raster te verschijnen.
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
video: single-line CSS layouts voor o.a. flex en grid
10 modern layouts in 1 line of CSS
Je kan oefenen op CSS Grid met: