Een raster kan worden gedefinieerd als een kruisende reeks verticale en horizontale lijnen. CSS-rasterindeling verdeelt een pagina in hoofdsecties. Grid-eigenschap biedt een op rasters gebaseerd lay-outsysteem met rijen en kolommen. Het maakt het ontwerpen van webpagina's eenvoudig zonder positionering en zweven. De rasterindeling biedt ons een manier om rasterstructuren te maken die in CSS worden weergegeven, en niet in HTML.

Net als bij de tabel kan een gebruiker de elementen in rijen en kolommen uitlijnen. Maar in vergelijking met tabellen is het eenvoudig om de lay-out te ontwerpen met het CSS-raster. We kunnen kolommen en rijen in het raster definiëren met behulp van raster-sjabloon-rijen En raster-sjabloon-kolommen eigenschappen.

Er kan een rastercontainer worden gemaakt door het weergave: raster of weergave: inline-raster op een element. Rastercontainer bevat de items van een raster die in de rijen en kolommen worden geplaatst.

Grid v/s Flexbox

Het is een veel voorkomende vraag die doorgaans rijst hoe het raster verschilt van de flexbox. Het raster is voor tweedimensionale lay-outs (rijen en kolommen tegelijkertijd), terwijl de flexbox wordt gebruikt voor de eendimensionale lay-outs (in een rij of kolom). Flexbox wordt gebruikt als iets in een rechte lijn moet staan.

Flexbox wordt gebruikt om de elementen in een enkele kolom of in een enkele rij te plaatsen. Aan de andere kant is het raster het beste om de elementen in meerdere kolommen en rijen te rangschikken.

Laten we het raster in CSS begrijpen aan de hand van een voorbeeld.

Voorbeeld

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Uitvoer