Utforska skillnaderna mellan dessa moderna CSS-layoutmetoder med ett praktiskt problem: att rada upp kolumner.
När det kommer till CSS-layouter är de två huvudsakliga verktygen till ditt förfogande Grid och Flexbox. Även om båda är fantastiska på att skapa layouter, tjänar de olika syften och har olika styrkor och svagheter.
Lär dig hur båda layoutmetoderna beter sig och när du ska använda den ena framför den andra.
Det olika beteendet hos CSS Flexbox och Grid
För att hjälpa till att visualisera saker, skapa en index.html fil i din föredragna mapp och klistra in följande markering:
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>
Båda diverna innehåller exakt samma barn så att du kan tillämpa ett annat system på var och en och jämföra dem.
Du kan också se att HTML importerar en formatmallsfil med namnet style.css. Skapa den här filen i samma mapp som index.html och klistra in följande stilar i den:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Din sida ska se ut så här:
Nu för att vända den första i en flexkolumn lägger du helt enkelt till följande kod till din stilmall:
.flex-container {
display: flex;
}
Detta är resultatet:
De flex-behållare div lägger nu ut sina underordnade element i kolumner. Dessa kolumner är flexibla och lyhörda – de anpassar sin bredd baserat på det tillgängliga utrymmet i visningsporten. Detta beteende är ett av de viktigaste grundläggande koncept bakom Flexbox.
För att förhindra överfulla kolumner i flex-behållare, kan du använda flex-wrap fast egendom:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Om det inte finns tillräckligt med utrymme för de underordnade elementen att passa på en rad, lindas de nu och fortsätter på nästa.
Applicera nu en Grid-layout på den andra använder denna CSS:
.grid-container {
display: grid;
}
Ingenting kommer att hända enbart med ovanstående deklaration eftersom standardbeteendet för Grid skapar rader som staplas ovanpå varandra.
För att växla till en kolumnvisning måste du ändra rutnät-autoflöde egendom (som är rad som standard):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Nu är resultatet här:
För att ange det exakta antalet kolumner du vill ha på varje rad, använd rutnät-mall-kolumner:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Detta värde skapar fem lika breda kolumner. För att få ett inpackningsbeteende som liknar Flexbox kan du använda responsiva egenskaper som automatisk passning och min Max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Du kommer ofta att höra Flexbox och Grid kallas endimensionell respektive tvådimensionell. Det är dock inte hela sanningen, eftersom både Flexbox och Grid kan göra en tvådimensionellt layoutsystem. De gör det bara på olika sätt, med olika begränsningar.
Det viktigaste är hur du kan kontrollera den endimensionella aspekten av layouten. Tänk på följande bild, till exempel:
Observera hur konsekvent Grid-kolumnen är och hur ojämn varje kolumn i Flexbox är. Varje rad/kolumn i en flexbehållare är oberoende av den andra. Så vissa kan vara större än andra, beroende på storleken på deras innehåll. Dessa är mindre som kolumner och mer som oberoende block.
Grid fungerar annorlunda genom att ställa in ett 2D-rutnät med kolumner låsta som standard. En kolumn med kort text kommer att ha samma storlek som en med mycket längre text, vilket bilden ovan visar.
Sammanfattningsvis är CSS Grid lite mer strukturerat, medan Flexbox är en mer flexibelt och lyhört layoutsystem. Dessa alternativa layoutsystem är välkända!
När ska man använda Flexbox
Vill du förlita dig på den inneboende storleken för varje kolumn/rad, som definieras av deras innehåll? Eller vill du ha en strukturerad kontroll ur förälderns perspektiv? Om ditt svar är det första, då är Flexbox den perfekta lösningen för dig.
För att visa detta, överväg en horisontell navigeringsmeny. Byt ut markeringen i taggar med detta:
<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>
Ersätt markeringen i CSS-filen med detta:
.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;
}
Här är resultatet:
Förvandla nu den första navigeringen till en flexibel layout och den andra till en rutnätslayout genom att lägga till följande CSS:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Jämför resultaten för att se vilket som var mer lämpligt:
Från bilden ovan kan du se att Flexbox är den perfekta lösningen i detta fall. Du har föremål som du vill lägga bredvid varandra och behålla sin inneboende storlek (stor eller liten beroende på textlängden). Med Grid har varje cell en fast bredd, och det ser inte lika bra ut – åtminstone med vanliga textlänkar.
När ska man använda CSS Grid
Ett ställe som Grid verkligen utmärker sig är när du vill skapa ett stelt system från föräldern. Ett exempel är en uppsättning kortelement som ska vara lika breda, även om de innehåller olika mycket innehåll.
Byt ut markeringen inuti taggar med detta:
<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>
Lägg till denna CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Du börjar med en Flexbox-skärm för att se hur den ser ut, så att du kan jämföra den med rutnätsskärmen. Här är utgången:
Lägg märke till hur den sista kolumnen är större än andra på grund av dess inneboende storlek, vilket är vad Flexbox hanterar bra. Men för att få dem samma bredd med Flexbox, måste du gå emot den inneboende storleken genom att lägga till följande:
.columns > * {
flex: 1;
}
Detta gör susen. Men Grid lämpar sig bättre för sådana här fall. Du anger bara antalet kolumner, och du är klar:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Här är resultatet:
En annan fördel med att använda Grid är att föräldern kontrollerar barnens layout. Så du kan lägga till och ta bort underordnade element utan att oroa dig för att bryta layouten.
Så när ska du använda Grid eller Flexbox?
Sammanfattningsvis är CSS Grid bra när du vill ha en strukturerad kontroll ur förälderns perspektiv, med samma storlek på kolumner oavsett storleken på dess individuella innehåll.
Flexbox, å andra sidan, är idealiskt när du vill ha ett mer flexibelt system baserat på den inneboende dimensioneringen av element.