Ontdek de verschillen tussen deze moderne CSS-opmaakmethoden met een praktisch probleem: kolommen op een rij zetten.
Als het om CSS-lay-outs gaat, zijn de twee belangrijkste tools die u tot uw beschikking heeft Grid en Flexbox. Hoewel beide geweldig zijn in het maken van lay-outs, dienen ze verschillende doeleinden en hebben ze verschillende sterke en zwakke punten.
Leer hoe beide lay-outmethoden zich gedragen en wanneer u de ene boven de andere gebruikt.
Het verschillende gedrag van CSS Flexbox en Grid
Om dingen te helpen visualiseren, maakt u een index.html bestand in de map van uw voorkeur en plak de volgende opmaak:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="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>
<divclass="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 div's bevatten exact dezelfde kinderen, dus u kunt op elke div een ander systeem toepassen en ze vergelijken.
U kunt ook zien dat de HTML een stijlbladbestand importeert met de naam stijl.css. Maak dit bestand in dezelfde map als index.html en plak de volgende stijlen erin:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Uw pagina zou er als volgt uit moeten zien:
Nu, om de eerste te draaien in een flexkolom, voegt u eenvoudig de volgende code toe aan uw stijlblad:
.flex-container {
display: flex;
}
Dit is het resultaat:
De flex-container div deelt nu de onderliggende elementen in kolommen in. Deze kolommen zijn flexibel en responsief: ze passen hun breedte aan op basis van de beschikbare ruimte in de viewport. Dit gedrag is een van de belangrijkste basisconcepten achter Flexbox.
Om overvolle kolommen in de flex-container, kunt u gebruik maken van de flex-wikkel eigendom:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Als er niet genoeg ruimte is voor de onderliggende elementen om op één lijn te passen, wikkelen ze zich nu om en gaan verder op de volgende.
Pas nu een rasterindeling toe op de tweede met behulp van deze CSS:
.grid-container {
display: grid;
}
Met de bovenstaande declaratie alleen zal er niets gebeuren, omdat het standaardgedrag van Grid rijen creëert die op elkaar worden gestapeld.
Om naar een kolomweergave over te schakelen, moet u de grid-auto-flow eigendom (dat wil zeggen rij standaard):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Hier is het resultaat:
Gebruik om het exacte aantal kolommen op elke regel op te geven raster-sjabloon-kolommen:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Met deze waarde worden vijf kolommen van gelijke breedte gemaakt. Om een inpakgedrag te krijgen dat vergelijkbaar is met dat van Flexbox, kunt u responsieve eigenschappen gebruiken, zoals automatisch passend En min-max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Je zult Flexbox en Grid vaak respectievelijk eendimensionaal en tweedimensionaal horen noemen. Dat is echter niet de volledige waarheid, omdat zowel Flexbox als Grid een tweedimensionaal lay-outsysteem. Ze doen het alleen op verschillende manieren, met verschillende beperkingen.
Het belangrijkste is de manier waarop u het eendimensionale aspect van de lay-out kunt bepalen. Beschouw bijvoorbeeld de volgende afbeelding:
Observeer hoe consistent de Grid-kolom is en hoe ongelijk elke kolom in de Flexbox is. Elke rij/kolom in een flexcontainer is onafhankelijk van de andere. Sommige kunnen dus groter zijn dan andere, afhankelijk van de omvang van hun inhoud. Deze lijken minder op kolommen en meer op onafhankelijke blokken.
Raster werkt anders, door een 2D-raster in te stellen met standaard vergrendelde kolommen. Een kolom met korte tekst zal dezelfde grootte hebben als een kolom met veel langere tekst, zoals de bovenstaande afbeelding laat zien.
Samenvattend is CSS Grid iets meer gestructureerd, terwijl Flexbox meer is flexibel en responsief lay-outsysteem. Deze alternatieve lay-outsystemen hebben een goede naam!
Wanneer moet u Flexbox gebruiken?
Wilt u vertrouwen op de intrinsieke grootte van elke kolom/rij, zoals gedefinieerd door hun inhoud? Of wil je gestructureerde controle vanuit het perspectief van de ouders? Als uw antwoord het eerste is, dan is Flexbox de perfecte oplossing voor u.
Om dit aan te tonen, kunt u een horizontaal navigatiemenu overwegen. Vervang de opmaak binnen het tags met dit:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Vervang de opmaak in het CSS-bestand hiermee:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Hier is het resultaat:
Transformeer nu de eerste navigatie in een flexibele lay-out en de tweede in een rasterlay-out door de volgende CSS toe te voegen:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vergelijk de resultaten om te zien welke het meest geschikt was:
Uit bovenstaande afbeelding kun je zien dat Flexbox in dit geval de perfecte oplossing is. Je hebt items die je naast elkaar wilt plaatsen en hun intrinsieke grootte wilt behouden (groot of klein, afhankelijk van de tekstlengte). Met Grid heeft elke cel een vaste breedte, en dat ziet er niet zo goed uit, tenminste met platte tekstlinks.
Wanneer CSS-raster gebruiken?
Eén plek waar Grid echt uitblinkt, is wanneer je een rigide systeem van de ouder wilt creëren. Een voorbeeld is een set kaartelementen die even breed moeten zijn, zelfs als ze verschillende hoeveelheden inhoud bevatten.
Vervang de opmaak in het tags met dit:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
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;
}
Je begint met een Flexbox-display om te zien hoe het eruit ziet, zodat je het kunt vergelijken met de rasterweergave. Hier is de uitvoer:
Merk op dat de laatste kolom groter is dan andere vanwege de intrinsieke afmetingen, en dat is waar Flexbox goed mee omgaat. Maar om ze met Flexbox dezelfde breedte te geven, zou je tegen die intrinsieke maatvoering moeten ingaan door het volgende toe te voegen:
.columns > * {
flex: 1;
}
Dit volstaat. Maar Grid is beter geschikt voor dit soort gevallen. U geeft gewoon het aantal kolommen op en u bent klaar om te gaan:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Hier is het resultaat:
Een ander voordeel van het gebruik van Grid is dat de ouder de lay-out van de kinderen bepaalt. U kunt dus onderliggende elementen toevoegen en verwijderen zonder dat u zich zorgen hoeft te maken over het verbreken van de lay-out.
Dus wanneer moet u Grid of Flexbox gebruiken?
Samenvattend is CSS Grid geweldig als je een gestructureerd besturingselement wilt vanuit het perspectief van de ouder, met een gelijke grootte aan kolommen, ongeacht de grootte van de individuele inhoud.
Flexbox is daarentegen ideaal wanneer u een flexibeler systeem wenst, gebaseerd op de intrinsieke maatvoering van elementen.