CSS Grid is een tweedimensionaal, op rasters gebaseerd lay-outsysteem waarmee u georganiseerde en flexibele website-indelingen kunt maken. Zie het als een raster van kolommen en rijen waarmee u webpagina-elementen kunt positioneren en rangschikken. In tegenstelling tot HTML-tabellen worden CSS-rasterlay-outs echter beheerd met CSS en niet met HTML-opmaak. Dit maakt CSS Grid extreem flexibel voor responsief webontwerp.
Hoe CSS-raster werkt Blocs
Bij het werken met CSS Grid binnen Blocs, is het belangrijk om te bedenken dat de rasterindeling uit twee hoofdelementen bestaat: een bovenliggende rastercontainer en in de meeste gevallen meerdere onderliggende onderliggende containers.
Bovenliggende rastercontainer
De bovenliggende rastercontainer is verantwoordelijk voor de belangrijkste lay-outinformatie. Op dit element zijn bijvoorbeeld het aantal kolommen/rijen en hun respectievelijke spleetafmetingen van toepassing.
Raster-kindcontainer
De binnenste onderliggende containers zijn de vakken waarin u normaal gesproken uw website-interface-elementen plaatst. Deze containers zijn standaard ingesteld op automatische stroom (passen in het raster), maar ze kunnen worden aangepast met behulp van aangepaste klassen, zodat ze op een grote verscheidenheid aan manieren kunnen worden gepositioneerd binnen de bovenliggende rastercontainer.
Over het plaatsen van kindercontainers leest u meer hier.
Voeg een rastercontainer toe
U kunt CSS Grid gaan gebruiken in uw Blocs project door een CSS Grid-container toe te voegen met behulp van de speciale Bric.
Of anders door een te selecteren Div Bric en het instellen ervan type dan: naar de rastercontainer.
De standaard CSS-rasterindeling in Blocs is twee kolommen bij twee rijen. Wanneer de lay-out op welke manier dan ook wordt aangepast, bijvoorbeeld door extra kolommen of rijen toe te voegen, wordt deze aangepaste lay-outinformatie opgeslagen in een aangepaste klasse die automatisch wordt toegepast op de CSS Grid-container.
Het is ook vermeldenswaard dat kolommen een breedte hebben van 1fr en de hoogte van rijen is ingesteld op auto standaard.
columns
Kolommen zijn de verticale verdelingen van de ruimte in de CSS-rasterindeling. Ze zijn vooral handig bij het leiden van het oog van de kijker, het optimaliseren van de leesbaarheid en het efficiënt benutten van de ruimte.
Voeg een kolom toe
Extra kolommen kunnen aan een CSS Grid-container worden toegevoegd door op de plusknop te klikken + bevindt zich in de rechterbovenhoek van de rasterselectieknoppen.
Een kolom verwijderen
Kolommen kunnen uit een CSS-rastercontainer worden verwijderd door op de prullenbakknop links bovenaan een kolombreedtecontroller te klikken.
Wanneer het aantal kolommen or rijen is aangepast, als er niet genoeg onderliggende containers zijn om de lay-out correct weer te geven, Blocs zal ze automatisch in de CSS Grid-container invoegen.
Het is ook belangrijk om te onthouden dat CSS Grid pure CSS gebruikt om de lay-out te bepalen, wat betekent dat kolommen kunnen worden toegevoegd en verwijderd per breekpunt.
Kolombreedte
Standaard is de breedte van een kolom ingesteld op 1fr op CSS Grid-containers binnen Blocs. De fr eenheid staat voor breuk. Het vertegenwoordigt een fractie van de beschikbare ruimte in de rastercontainer.
Wanneer gebruikt voor kolombreedte, 1fr betekent dat de kolom een fractie van de totale beschikbare ruimte in beslag neemt. Als meerdere kolommen de fr eenheid, wordt de ruimte verdeeld op basis van de breukwaarde van elke kolom ten opzichte van de som van de breukwaarden van alle kolommen.
De breedte van een kolom kan per breekpunt worden aangepast met behulp van de formaatgreep op het besturingselement voor de kolombreedte. Deze hendel slepen links or rechts zal de aanpassen fr waarde voor de gerelateerde kolom in stappen van 0.5.
Kolomopening
U kunt de afstand ertussen instellen kolommen op elk breekpunt door de lege ruimte tussen de kolommen in de rastercontainer op het ontwerpcanvas te slepen.
U kunt de kolomafstandmeting van een CSS-rastercontainer ook opnieuw instellen door rechts klikken in de ruimte tussen de kolommen en selecteren Breedte opnieuw instellen.
Rijen
Rijen zijn de horizontale verdelingen van de ruimte in de CSS-rasterindeling. Ze zorgen ervoor dat de inhoud logisch stroomt en de visuele uitlijning behouden blijft.
Voeg een rij toe
Extra rijen kunnen aan een CSS-rastercontainer worden toegevoegd door op de plusknop te klikken + bevindt zich in de linkerbenedenhoek van de rasterselectieknoppen.
Rijen werken iets anders dan kolommen, hoewel u meer rijen kunt toevoegen. Meestal wordt het aantal rijen berekend en automatisch aangepast op basis van het aantal kolommen en onderliggende containers binnen de bovenliggende rastercontainer.
Een rij verwijderen
Het proces voor het verwijderen van rijen verschilt enigszins van het verwijderen van kolommen. Het is alleen mogelijk om rijen te verwijderen als er een negatief aantal onderliggende containers is voor het aantal rijen in de rasterindeling.
Wanneer het aantal onderliggende containers negatief is voor een rij, wordt er een prullenbakknop weergegeven aan de bovenrand van de rijhoogteregeling (die geen onderliggende containers bevat). Als u op deze knop klikt, wordt de rij verwijderd.
Rijhoogte
De standaardhoogte van een rij is ingesteld op auto op CSS Grid-containers binnen Blocs. De auto eenheid vertelt het raster in wezen om automatisch de hoogte van die rij te bepalen op basis van de inhoud ervan. Met andere woorden: de rij zal zo groot zijn als het hoogste stuk inhoud in de onderliggende rastercontainers van die rij.
De hoogte van een kolom kan per breekpunt worden aangepast met behulp van de formaatgreep op de rijhoogteregeling. Deze hendel slepen up or beneden past de rijhoogte aan pixels.
Hoewel deze optie beschikbaar is, wordt het aanbevolen om deze te gebruiken auto voor rijhoogtes, omdat dit flexibeler is wat betreft het reactievermogen van de indeling.
Rijafstand
U kunt de afstand ertussen instellen rijen op elk breekpunt door de lege ruimte tussen de rijen in de CSS-rastercontainer op het ontwerpcanvas te slepen.
U kunt de rijafstandmeting van een CSS Grid-container ook opnieuw instellen door rechts klikken in de ruimte tussen de kolommen en selecteren Hoogte opnieuw instellen.
Kindercontainers positioneren
Standaard zijn deze containers ingesteld op automatische stroom (passen in het raster), maar ze kunnen onafhankelijk worden aangepast met behulp van aangepaste klassen, zodat ze binnen de bovenliggende rastercontainer kunnen worden geplaatst.
Om aan te passen hoe een onderliggende gridcontainer binnen het raster wordt gepositioneerd, moet u deze eerst selecteren en een aangepaste klasse toepassen.
De Klasse-editor, is het nu mogelijk om waarden toe te passen op de Rasteritem regels voor de geselecteerde onderliggende container om deze te positioneren in de respectievelijke bovenliggende CSS-rastercontainer.
Kolom begin
De raster-kolom-start eigenschap wordt gebruikt om de kolomrasterlijn aan te geven waar een rasteritem begint in een rasterindeling.
Kolom einde
De raster-kolom-einde eigenschap wordt gebruikt om aan te geven hoeveel kolommen een item zal bestrijken, of de kolomrasterlijn waar een rasteritem eindigt in een rasterlay-out.
rij beginnen
De raster-rij-begin eigenschap wordt gebruikt om de rijrasterlijn aan te geven waar een rasteritem begint in een rasterindeling.
Einde rij
De raster-rij-einde eigenschap wordt gebruikt om aan te geven hoeveel rijen een item zal beslaan, of de rijlijn waar een rasteritem eindigt in een rasterlay-out.
Positioneringstechnieken
Met behulp van de eigenschappen kolombegin, kolomeinde, rijbegin en rijeinde is het mogelijk om onderliggende containers binnen de bovenliggende CSS-rastercontainer te plaatsen. Hier volgen enkele veelvoorkomende voorbeelden van positioneringstechnieken voor rasterkinderen.
Alle voorbeelden hier kunnen hierin verder worden onderzocht Blocs voorbeeldproject.
Span kolommen
Om een onderliggende rastercontainer over een aantal kolommen te spreiden, past u een klasse toe op de onderliggende container en stelt u vervolgens de Rasteritems > Kolom > Einde veldwaarde naar span gevolgd door het aantal kolommen waarover u het kind wilt verdelen.
Span rijen
Als u een onderliggende rastercontainer over een aantal rijen wilt uitstrekken, past u een klasse toe op de onderliggende container en stelt u vervolgens de Rasteritems > Rij > Einde veldwaarde naar span gevolgd door het aantal rijen waarover u het kind wilt verdelen.
Verander de horizontale positie
In dit voorbeeld bevindt de paarse onderliggende container zich oorspronkelijk in de eerste horizontale positie in het raster. Met behulp van een aangepaste klasse wordt deze rechtstreeks naar de tweede horizontale positie of tweede kolom verplaatst.
Om een onderliggende rastercontainer horizontaal te positioneren, past u een klasse toe op de onderliggende container en stelt u vervolgens de Rasteritems > Kolom > Begin veldwaarde toe aan het kolomnummer waarin u deze wilt plaatsen. Het is ook belangrijk om de Rasteritems > Rij > Begin veldwaarde toe aan het rijnummer waarin u wilt dat deze blijft staan.
Verander de verticale positie
In dit voorbeeld bevindt de paarse onderliggende container zich oorspronkelijk in de eerste verticale positie in het raster. Met behulp van een aangepaste klasse wordt deze naar beneden verplaatst naar de tweede verticale positie.
Om een onderliggende rastercontainer verticaal te positioneren, past u een klasse toe op de onderliggende container en stelt u vervolgens de Rasteritems > Rij > Begin veldwaarde toe aan het rijnummer waarin u deze wilt plaatsen.
Bij het positioneren van onderliggende rastercontainers is het belangrijk om er rekening mee te houden dat op andere onderliggende containers in het raster mogelijk conflicterende klassenpositioneringsregels zijn toegepast, waardoor ongewenste lay-outfouten kunnen ontstaan. Zorg ervoor dat u uw rasterklassen georganiseerd houdt om verwarring te voorkomen bij het bouwen met CSS Grid.
Verder lezen
Dit artikel is bedoeld voor beginners die hun eerste stappen zetten met CSS Grid. Als u op zoek bent naar meer diepgaande en geavanceerde informatie over CSS Grid, raden we u aan deze inleidende handleiding te lezen over CSS-raster van CSS-trucs.