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: border-box | content-box (default)

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.

try it yourself:https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_container\

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.

try it yourself:https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-template-columns2\

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.

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-template-rows\

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:

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_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:

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_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

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-column2\

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

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-row2\

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

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-area1 try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-area2\

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; }

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_flexible_order

@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; }
}

try it yourself:n https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_flexible_order2\

video: single-line CSS layouts voor o.a. flex en grid

Je kan oefenen op CSS Grid met:

Previousunits Nextflex

Last updated 1 year ago