301 Redirect: flexibele roosters over korrels CSS Grid en Flexbox winnen tegenwoordig aan populariteit binnen de webontwikkelingswereld vanwege hun gebruiksgemak en aanpasbaarheid. Met beide lay-outopties, Grid en Flexbox, kunnen gebruikers de inhoud van hun websites ordenen zonder in CSS of JavaScript te hoeven hacken

Leestijd: 6 minuten

Bron

CSS Grid en Flexbox winnen tegenwoordig aan populariteit binnen de webontwikkelingswereld vanwege hun gebruiksgemak en aanpasbaarheid. Met beide lay-outopties, Grid en Flexbox, kunnen gebruikers de inhoud van hun websites ordenen zonder in CSS of JavaScript te hoeven hacken.

De vraag doemt echter op: wanneer zou je een CSS Grid-module gebruiken boven Flexbox en vice versa? Dat is de vraag die we proberen te beantwoorden, samen met u meer te vertellen over hun unieke sterke punten!

Het grootste verschil tussen Flexbox en Grid is de dimensionaliteit. Flexbox is een eendimensionaal lay-outsysteem dat inhoud in rijen of kolommen kan houden en de inhoud krimpt of uitrekt op basis van het gebied/de sectie waarin het zich bevindt.

Aan de andere kant is Grid een tweedimensionaal lay-outsysteem, waarbij inhoud in rijen en kolommen kan worden weergegeven, maar het heeft een meer rigide structuur. Laten we, om meer in de verschillen en overeenkomsten te duiken, eens kijken naar een paar voorbeelden met bijbehorende HTML en CSS.

Voorbeeld 1: Flexbox vs. Grid

In dit voorbeeld rangschikken we vijf elementen, genaamd Eerste, Tweede, Derde, Vierde en Vijfde, met zowel Flexbox- als Grid-lay-outs. Ten eerste hebben we Flexbox en hier in het bestand “wrapper.css” wijzen we Flex-eigenschappen toe met behulp van “display: flex” en “flex: 1 1 150px”, waarbij de grootte van de containers wordt ingesteld op 150px.

Met de eigenschap “flex-wrap: wrap”, kunnen de elementen naar de volgende rij worden gevouwen zodra de huidige rij vol is (denk er nogmaals aan dat Flexbox een eendimensionaal lay-outsysteem is).

Onze resulterende lay-out zou er ongeveer zo uit moeten zien:

Zoals te zien is, vullen Eerste, Tweede en Derde zoveel ruimte als ze kunnen, gegeven de beperkingen in de code, en Vierde en Vijfde lopen door naar de volgende rij. Ze vulden ook de hele rij vanwege de eigenschap “flex-wrap”.

Maar in plaats daarvan, wat als we willen dat Vierde en Vijfde op één lijn komen te staan onder Eerste en Tweede? Dit is waar Grid, het tweedimensionale lay-outsysteem, om de hoek komt kijken.

Grid rangschikt containers op dezelfde manier waarop u een tabel zou maken, met dezelfde grootte en structuur. Hieronder, in de overeenkomstige HTML en CSS, definieert “display: grid” de rasterlay-out en de eigenschap “grid-template-columns: repeat(3, 1fr)” plaatst drie containers in één rij en gaat dan naar de volgende rij.

Onze resulterende lay-out ziet er nu als volgt uit:

Zoals beloofd bootst Grid een tafelachtige structuur na en plaatst de eerste drie items op een rij en gaat op een tafelachtige manier naar de volgende. Raster stelt ons in staat om elementen beter en op een meer gestructureerde manier uit te lijnen, zoals hierboven te zien is, maar het is stijver dan Flexbox, omdat Flexbox zou proberen de lege ruimte aan het uiteinde op te vullen dat hierboven te zien is.

Voorbeeld 2: Flexbox vs. Grid

Een ander voorbeeld van een containerrangschikking dat het verschil tussen Grid en Flexbox benadrukt, wordt hieronder weergegeven, waar de containers tekst van verschillende groottes bevatten.

In het eerste voorbeeld met Flexbox zijn er extra marges toegevoegd omdat er geen standaardmarges zijn (met behulp van “marge: 0,5rem”) voor flexcontainers, samen met extra opvulling tussen de containers met behulp van “opvulling: 3rem”.

De resulterende lay-out ziet er als volgt uit op een groter scherm:

En zo op een smaller scherm:

Nogmaals, zoals eerder getoond, kunnen we de flexibiliteit en eendimensionaliteit in Flexbox zien.

Ten eerste probeert Flexbox zoveel mogelijk informatie in één rij te vullen en gaat dan door naar de volgende. Ten tweede is de container met de lange inhoud niet even groot als de andere vijf containers.

De afmetingen van Flexbox-containers zijn afhankelijk van de inhoud die ze bevatten en niet van hun structuur (wat het geval is voor Grid), wat een betere flexibiliteit bij het weergeven van inhoud mogelijk maakt.

Hoe zou Grid dit weergeven? Hier is de code:

En de resulterende lay-out op een breder scherm:

En een smaller scherm:

Zoals eerder gezien in voorbeeld 1, bootst de lay-out van Grid die van een tabel na, waarbij elke container dezelfde grootte heeft.

In het bovenstaande voorbeeld zijn enkele eigenschappen zoals “grid-auto-columns: minmax(15rem, auto)” en “grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))” gebruikt om de Rasterlay-out iets dynamischer, zoals te zien is in het bredere scherm waarbij box 5 korter is, maar we kunnen nog steeds niet dezelfde flexibiliteit bereiken als Flexbox, hoewel we wel een goede stijve structuur krijgen.

Het in het spel brengen

Terwijl u uw eigen reis maakt bij het verkennen en gebruiken van Flexbox- en Grid-lay-outs, zijn er bepaalde belangrijke elementen en eigenschappen waarmee u voor beide rekening moet houden.

Voor Flexbox waren de containers in de bovenstaande voorbeelden in rijen gerangschikt, aangezien de eigenschap “flex-direction” standaard is ingesteld op “rij” en van rechts naar links gaat. Dit kan eenvoudig worden gewijzigd door “flex-richting: kolom” toe te voegen.

Een andere belangrijke eigenschap om in gedachten te houden is “flex-wrap”, die standaard is ingesteld op “nowrap”, waarbij items zichzelf in afzonderlijke rijen op het scherm rangschikken.

Als u dit instelt op “wrap”, zoals in de bovenstaande voorbeelden, worden de items zo veel mogelijk in één rij gerangschikt en vervolgens in de volgende geplaatst, en op dezelfde manier zal het instellen van dit op “wrap-reverse” zich op meerdere rijen wikkelen van onder naar boven.

Nog een andere belangrijke eigenschap die moet worden benadrukt, gezien de bovenstaande voorbeelden, is ‘justify-content’.

Dit is standaard ingesteld op “flex-start”, waarbij items naar het begin van de rij worden gepusht en er wat extra ruimte is, vergelijkbaar met Grid, maar door dit in te stellen op “justify-content: space-evenly” vult lege ruimte en regelt de containers dienovereenkomstig.

Dit zijn slechts enkele van de talloze belangrijke eigenschappen die nuttig zijn om een goede start te maken met het spelen met Flexbox en het gebruik ervan te begrijpen.

Evenzo heeft Grid zijn eigen reeks belangrijke eigenschappen om te kennen en mee te beginnen.

Voor elk item is de eigenschap “rastergebied: X, Y, span 1, span 2” uiterst belangrijk omdat het specificeert om een item te starten op rij X, kolom Y en span 1 rij en 2 kolommen.

De eigenschappen “grid-auto-columns” en “grid-auto-rows” stellen de standaardgroottes van kolommen en rijen in het raster in, terwijl, vergelijkbaar met “rastergebied”, de eigenschappen “rasterkolom: 1, span 2 ” en “rasterrij: 1, span 2” kunnen worden gebruikt om een item respectievelijk op kolom/rij 1 en 2 kolommen/rijen te laten beginnen.

Bovendien kunnen er hiaten in de hele rasterstructuur worden ingesteld met behulp van “gap: Xpx Ypx” die de rij- en kolomhiaten definieert. Kopieer de bovenstaande code en probeer deze uit om te zien hoe ze de bovenstaande lay-outs zouden beïnvloeden!

Conclusie: welke is het beste?

Dus, Grid of Flexbox? Zoals hierboven getoond, is er geen duidelijke winnaar; beide hebben hun eigen voor- en nadelen en bieden unieke sterke punten. Flexbox biedt flexibiliteit bij het weergeven van uw inhoud die in sommige gevallen nuttig kan zijn, terwijl Grid een goede en strakke structuur biedt, die in andere gevallen zelf nuttig kan zijn.

Wil je een website ontwikkelen met meer dynamische content, waarbij de positionering van de content niet zo belangrijk is, dan is Flexbox wellicht de juiste keuze. Anders, als u een meer rigide, tabelachtige structuur met inhoud wilt weergeven, is Grid uw beste keuze.

En aan het eind van de dag kunnen zowel Flexbox als Grid worden aangepast met extra eigenschappen, zodat u een stijvere structuur kunt krijgen met Flexbox, of een flexibelere, dynamische structuur met Grid.

Zie ze als lepels en vorken, beide hebben hun eigen unieke gebruiksscenario’s, maar je kunt de een in plaats van de ander gebruiken. Dit benadrukt de schoonheid van CSS zelf, waardoor we veel ongelooflijke opties hebben om onze inhoud en lay-out op veel verschillende manieren te stylen en aan te passen. Gebruik je liever Grid of Flexbox, of allebei? Laat het ons weten!

De post 301 Redirect: Flex grids over grits verscheen eerst op GoDaddy Blog .