CSS raster of Flexbox: Wat is beter voor het maken van kolommen?
Als het aankomt op CSS lay-outs, zijn de twee belangrijkste gereedschappen die je tot je beschikking hebt Grid en Flexbox. Hoewel ze allebei geweldig zijn in het maken van lay-outs, dienen ze verschillende doelen en hebben ze verschillende sterke en zwakke punten.
Begrijp de verschillende gedragingen van elke lay-outmethode en de omstandigheden waarin ze moeten worden gebruikt.
Het verschillende gedrag van CSS Flexbox en Grid
Het bovengenoemde proces kan effectief worden overgebracht door een index.html bestand te genereren in de gekozen map en het volgende codefragment daarin op te nemen:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox vs Grid</h1>
<h2>Flexbox:</h2>
<div class="flex-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
<h2>Grid:</h2>
<div class="grid-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
</body>
</html>
Beide divisies omvatten identieke nakomelingen, waardoor de implementatie van verschillende methodologieën binnen elke divisie mogelijk is en hun vergelijking wordt vergemakkelijkt.
Je kunt zien dat de HTML een gestileerd tekstdocument bevat met de naam “style.css”. Maak dit bestand in dezelfde map als “index.html” en voeg de volgende ontwerpen erin:
body {
padding: 30px;
}
h1 {
color: #A52A2A;
}
h2 {
font-size: large;
}
div:not([class]) {
outline: 2px solid black;
padding: 0.5em;
}
Je pagina zou er zo uit moeten zien:
Om het eerste div-element te transformeren in een flexibele kolom binnen je CSS-bestand, hoef je alleen maar de meegeleverde opmaak in het stylesheet op te nemen. Hierdoor wordt de opmaak van het eerste div element effectief gewijzigd door gebruik te maken van de eigenschappen en attributen die horen bij de display en flex CSS eigenschappen.
.flex-container {
display: flex;
}
Dit is het resultaat:
De flexcontainer gebruikt een opmaakstrategie die bekend staat als flexbox, die zijn kinderen in horizontale rijen of kolommen rangschikt die dynamisch kunnen worden aangepast aan de afmetingen van het weergavegebied. Dit vermogen om de grootte aan te passen is fundamenteel om de principes van flexbox te begrijpen, wat de basis vormt van het nut ervan in webdesign.
Om mogelijke problemen met kolommen die overlopen binnen een flexibele container te beperken, wordt het gebruik van de eigenschap flex-wrap aanbevolen.
.flex-container {
display: flex;
flex-wrap: wrap;
}
De nieuwe CSS flexbox eigenschap zorgt voor een efficiënter gebruik van de ruimte door toe te staan dat kindelementen over meerdere regels vloeien wanneer dat nodig is, in plaats van dat ze overlopen of afgekapt worden zoals in eerdere versies. Dit wordt bereikt door de implementatie van een flexibele container met een beschikbare vrije ruimte die wordt berekend op basis van de grootte, die vervolgens kan worden verdeeld over de kinderen op basis van hun respectieve grootte en prioriteiten die zijn ingesteld met behulp van de eigenschappen ‘flex-grow’, ‘flex-shrink’ en ‘flex-basis’.Door deze kindelementen om te wikkelen en verder te laten gaan op volgende regels wanneer de beschikbare ruimte niet meer voldoende is om ze allemaal op één enkele rij te laten verschijnen, helpt deze functie lay-outs te optimaliseren en mogelijke ontwerpproblemen te vermijden die kunnen ontstaan door beperkingen van de vaste breedte.
Om een rastergebaseerde lay-out te bereiken voor het tweede element, kun je de volgende CSS-regels gebruiken:css.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;}De display: grid; regel past het “grid” lay-outmodel toe op de .grid klasse, waardoor we er rijen en kolommen in kunnen definiëren. De eigenschap grid-template-columns specificeert dat we een automatisch gevuld raster willen maken met een minimale breedte van 200 pixels en een maximale breedte van 1 fractie (wat betekent dat elke kolom zoveel ruimte inneemt als nodig is). Ten slotte wordt met de eigenschap grid-gap
.grid-container {
display: grid;
}
De bovenstaande verklaring alleen heeft in de huidige vorm geen effect, omdat de standaardwerking van het raster ertoe leidt dat de samenstellende elementen standaard verticaal op elkaar worden gerangschikt.
Om over te gaan van een rijenschikking naar een kolomschikking is het nodig om de waarde van de eigenschap grid-auto-flow te wijzigen, die standaard op rij staat. Door deze eigenschap te wijzigen in kolom worden de rasteronderdelen weergegeven in verticale kolommen in plaats van horizontale rijen.
.grid-container {
display: grid;
grid-auto-flow: column;
}
Dit is het resultaat:
Gebruik de eigenschap “grid-template-columns” in CSS om het gewenste aantal kolommen per rij binnen een rasterindeling nauwkeurig aan te geven.
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Om een lay-out te bereiken met meerdere kolommen van gelijke breedte die zich net zo gedraagt als Flexbox als het gaat om het omsluiten van inhoud, kan gebruik worden gemaakt van responsieve ontwerpeigenschappen zoals “auto-fit”, “min-content” en “max-content”.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Flexbox en Grid worden soms gekarakteriseerd als respectievelijk eendimensionale en tweedimensionale lay-outsystemen; toch is deze classificatie een oversimplificatie omdat zowel Flexbox als Grid de mogelijkheid hebben om tweedimensionale lay-outs te maken ondanks hun verschillen in aanpak en beperkingen.
Het regelen van de enkelvoudige dimensionaliteit van de indeling is inderdaad van het grootste belang. Houd bijvoorbeeld rekening met de bovenstaande illustratie:
De consistentie van de Raster kolom is inderdaad opmerkelijk in vergelijking met de variatie die wordt waargenomen binnen de Flexbox rijen/kolommen.Het is belangrijk om te beseffen dat elke individuele rij/kolom binnen een flexcontainer onafhankelijk van elkaar werkt, wat resulteert in mogelijke verschillen in grootte op basis van de inhoud die ze bevatten. Daarom kunnen deze elementen worden gezien als afzonderlijke blokken in plaats van traditionele kolommen.
Grid werkt anders door een tweedimensionale matrix te maken waarin kolommen vooraf zijn ingesteld om vast te blijven. Een element met beknopte inhoud zal bijvoorbeeld dezelfde afmetingen hebben als een ander element met uitgebreide tekst, zoals geïllustreerd in de bijgaande afbeelding.
In essentie biedt CSS Grid een meer georganiseerde aanpak voor het ontwerpen van lay-outs in vergelijking met flexbox, dat een groter aanpassingsvermogen en reactievermogen biedt bij het maken van dynamische gebruikersinterfaces. De namen van deze twee prominente lay-outsystemen zouden niet passender kunnen zijn.
Wanneer gebruik je Flexbox
Wil je de inherente afmetingen van individuele kolommen en rijen gebruiken op basis van hun inhoud, of wil je er gestructureerde controle over uitoefenen vanuit het standpunt van een bovenliggend element? Als je voor het eerste kiest, biedt Flexbox een ideale oplossing.
Om dit concept te illustreren, bekijken we een hypothetisch scenario waarin we een horizontaal uitgelijnde navigatiebalk hebben binnen de openende en sluitende HTML tags. De bijgewerkte code zou er als volgt uitzien:
<h1>Flexbox vs. Grid</h1>
<header class="flex">
<h2>Flexbox</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<header class="grid">
<h2>Grid</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
Wijzig de inhoud binnen het cascading stylesheet door gebruik te maken van het gegeven codefragment ter vervanging van bestaande markup.
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solid black;
margin-bottom: 30px;
}
header > *:first-child {
border: var(--border-width) solid #FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid #90EE90;
}
Dit is het resultaat:
Om een flexibele navigatie te maken met de eerste menu-items verticaal gestapeld op kleinere schermen en weergegeven als twee kolommen van gelijke breedte op grotere schermen met behulp van CSS Grid, voegt u de volgende code toe aan uw stylesheet:css/* Kleine schermen // Grotere schermen */And voor het tweede menu-item in een lijststijl kun je dezelfde
.flex .nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid .nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
gebruiken Bepaal de doeltreffendheid van elke aanpak door hun resultaten te vergelijken:
De visuele weergave illustreert inderdaad hoe Flexbox tegemoet komt aan de vereiste om elementen naast elkaar uit te lijnen met behoud van hun natuurlijke afmetingen. Omgekeerd levert Grid, met zijn vooraf bepaalde celgrootte, mogelijk geen optimaal uiterlijk op wanneer het wordt toegepast op links naar platte tekst.
Wanneer CSS Grid gebruiken
Grid biedt een duidelijk voordeel in situaties waar een vaste structuur gewenst is voor kindelementen binnen hun bovenliggende container.Bijvoorbeeld, het rangschikken van een reeks kaarten met uniforme breedte, ongeacht hun verschillende inhoudsgroottes, kan effectief worden bereikt met Grid.
Vervang de opmaak binnen de tags door het bijgeleverde codefragment, dat een reeks instructies bevat voor het maken en stylen van webpagina’s met behulp van HTML en CSS.
<h1>Flexbox vs. Grids</h1>
<section class="cards">
<h2>Some cards</h2>
<div class="columns">
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">A Longer Title Than Others</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
</div>
</section>
Voeg deze CSS toe:
.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
De eerste demonstratie maakt gebruik van een Flexbox-lay-out om deze visueel te vergelijken met de Grid-lay-out. Het weergegeven resultaat is als volgt:
Het is inderdaad opmerkelijk dat de laatste kolom een grotere afmeting vertoont vanwege de inherente afmetingen, die het Flexbox-opmaaksysteem effectief beheert. Maar om alle kolommen met een uniforme breedte weer te geven met Flexbox, moet je deze inherente afmeting opheffen door de volgende methodologie toe te passen:
.columns > * {
flex: 1;
}
Rasterindelingen zijn een effectieve oplossing als een specifieke rangschikking van elementen vereist is. Door het aantal kolommen op te geven, kun je eenvoudig de gewenste uitlijning bereiken zonder complexe CSS-stijlen of JavaScript-manipulaties te hoeven gebruiken.
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Hier is het resultaat:
Het gebruik van Grid op deze manier biedt een extra voordeel, omdat ouders controle kunnen houden over de lay-out van hun kinderen. Dit betekent dat nieuwe of verwijderde kindelementen de algemene structuur niet verstoren.
Wanneer moet je Grid of Flexbox gebruiken?
Engelse versie voor gevorderden: Grid-lay-out biedt een goed georganiseerde structuur voor het bovenliggende element en zorgt voor consistente kolombreedten die uniform blijven bij verschillende inhoudsformaten.
Flexbox biedt een aanpasbare lay-out die vertrouwt op de inherente afmetingen van de componenten, waardoor het zeer geschikt is voor situaties waarin flexibiliteit en reactiesnelheid van het grootste belang zijn.