CSS Grid eller Flexbox: Vilket är bäst för att skapa kolumner?
När det gäller CSS-layouter är de två viktigaste verktygen Grid och Flexbox. Båda är fantastiska för att skapa layouter, men de tjänar olika syften och har olika styrkor och svagheter.
Få en förståelse för de olika beteenden som uppvisas av varje layoutmetod, samt under vilka omständigheter de bör användas.
De olika beteendena hos CSS Flexbox och Grid
Den ovan nämnda processen kan förmedlas effektivt genom att skapa en index.html fil i den valda katalogen och införliva det efterföljande kodavsnittet i den:
<!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>
Båda divisionerna har identiska avkommor, vilket gör det möjligt att implementera olika metoder inom varje division och underlätta jämförelsen av dem.
Du kan observera att HTML innehåller ett stiliserat textdokument som kallas “style.css”. Konstruera den här filen i samma katalog som “index.html” och infoga de efterföljande designerna i den:
body {
padding: 30px;
}
h1 {
color: #A52A2A;
}
h2 {
font-size: large;
}
div:not([class]) {
outline: 2px solid black;
padding: 0.5em;
}
Din sida bör se ut så här:
För att omvandla det ursprungliga div-elementet till en flexibel kolumn i din CSS-fil, är allt som krävs att du införlivar den medföljande markeringen i formatmallen. Detta kommer effektivt att ändra layouten för det första div-elementet genom att använda de egenskaper och attribut som är associerade med CSS-egenskaperna display och flex.
.flex-container {
display: flex;
}
Detta är resultatet:
Flexbehållaren använder en layoutstrategi som kallas flexbox, som arrangerar sina barn i horisontella rader eller kolumner som dynamiskt kan justeras för att passa visningsområdets dimensioner. Denna förmåga att ändra storlek är grundläggande för att förstå principerna för flexbox, som utgör grunden för dess användbarhet inom webbdesign.
För att minska potentiella problem med kolumner som svämmar över i en flexibel behållare rekommenderas att använda egenskapen flex-wrap .
.flex-container {
display: flex;
flex-wrap: wrap;
}
Den nya CSS-egenskapen flexbox möjliggör effektivare användning av utrymme genom att låta underordnade element flöda på flera rader vid behov, snarare än att få dem att svämma över eller trunkera som i tidigare versioner. Detta uppnås genom implementeringen av en flexibel behållare med ett tillgängligt ledigt utrymme som beräknas baserat på dess storlek, som sedan kan fördelas mellan dess barn enligt deras respektive storlekar och prioriteringar som anges med egenskaperna “flex-grow”, “flex-shrink” och “flex-basis”.Genom att låta dessa underordnade element omslutas och fortsätta på efterföljande rader när det tillgängliga utrymmet blir otillräckligt för att alla ska visas på en enda rad, hjälper denna funktion till att optimera layouter och undvika potentiella designproblem som kan uppstå vid begränsningar av fast bredd.
För att uppnå en rutnätsbaserad layout för det andra elementet kan man använda följande CSS-regler:css.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;} display: grid; Regeln tillämpar layoutmodellen “grid” på .grid klassen, så att vi kan definiera rader och kolumner inom den. Egenskapen grid-template-columns anger att vi vill skapa ett automatiskt fyllt rutnät med minsta bredd på 200 pixlar och största bredd på 1 bråkdel (vilket innebär att varje kolumn tar upp så mycket utrymme som behövs). Slutligen anger egenskapen grid-gap
.grid-container {
display: grid;
}
Det ovan nämnda uttalandet ger i sig ingen effekt, eftersom standardanvändningen av Grid innebär att de ingående elementen som standard är ordnade vertikalt ovanpå varandra.
För att övergå från en radlayout till ett kolumnarrangemang är det nödvändigt att ändra värdet på grid-auto-flow egenskapen, som standard row . Genom att ändra denna egenskap till kolumn , kommer rutnätsobjekten att visas i vertikala kolumner istället för horisontella rader.
.grid-container {
display: grid;
grid-auto-flow: column;
}
Här är resultatet:
För att exakt ange det önskade antalet kolumner per rad i en gridlayout använder du egenskapen “grid-template-columns” i CSS.
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
För att få en layout med flera lika breda kolumner som fungerar på samma sätt som Flexbox när det gäller ombrytning av innehåll, kan man använda responsiva designegenskaper som “auto-fit”, “min-content” och “max-content”.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Flexbox och Grid beskrivs ibland som endimensionella respektive tvådimensionella layoutsystem, men detta är en förenkling eftersom både Flexbox och Grid har förmågan att skapa tvådimensionella layouter trots att de har olika tillvägagångssätt och begränsningar.
Det är mycket viktigt att reglera arrangemangets singulära dimensionalitet. Ta till exempel den ovan nämnda illustrationen:
Faktum är att Grid-kolumnens konsistens är anmärkningsvärd jämfört med den variation som observeras inom Flexbox rader / kolumner.Det är viktigt att känna till att varje enskild rad/kolumn i en flexcontainer fungerar oberoende av varandra, vilket resulterar i potentiella skillnader i storlek baserat på innehållet de innehåller. Följaktligen kan dessa element uppfattas som distinkta block snarare än traditionella kolumner.
Grid fungerar distinkt genom att skapa en tvådimensionell matris där kolumnerna är förinställda att förbli fasta. Till exempel ska ett element med kortfattat innehåll ha kongruenta dimensioner med ett annat med omfattande text, vilket illustreras i den bifogade avbildningen.
CSS Grid ger en mer organiserad metod för att utforma layouter jämfört med flexbox, som ger större anpassningsförmåga och responsivitet när det gäller att skapa dynamiska användargränssnitt. Namnen på dessa två framstående layoutsystem kunde inte vara mer passande.
När ska man använda Flexbox
Vill du hellre utnyttja de inneboende dimensionerna hos enskilda kolumner och rader baserat på deras innehåll, eller utöva strukturerad kontroll över dem från ett överordnat elements synvinkel? Om du väljer det förstnämnda är Flexbox en idealisk lösning.
För att illustrera detta koncept, låt oss undersöka ett hypotetiskt scenario där vi har en horisontellt inriktad navigeringsfält som ligger inom de inledande och avslutande HTML taggarna. Den uppdaterade koden skulle se ut på följande sätt:
<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>
Ändra innehållet i den kaskadformade stilmallen genom att använda det medföljande kodavsnittet som ersättning för eventuell befintlig markering.
.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;
}
Här är resultatet:
Om du vill skapa en flexibel navigering med de första menyalternativen staplade vertikalt på mindre skärmar och visade som två kolumner med samma bredd på större skärmar med CSS Grid, lägger du till följande kod i din formatmall:css/* Små skärmar // Större skärmar */ Och för det andra menyalternativet i en liststil kan du använda samma
.flex .nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid .nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Fastställ effektiviteten hos varje metod genom att jämföra deras resultat:
Den visuella representationen illustrerar hur Flexbox tillgodoser kravet på att anpassa element sida vid sida samtidigt som deras naturliga dimensioner bevaras. Omvänt kan Grid, med sin förutbestämda cellstorlek, inte ge ett optimalt utseende när det tillämpas på vanliga textlänkar.
När ska man använda CSS Grid
Grid har en tydlig fördel i situationer där man vill ha en fast struktur för underordnade element inom deras överordnade container.Med Grid kan man t.ex. ordna en serie kort med enhetlig bredd, oberoende av innehållets varierande storlek.
Ersätt markeringen i taggarna med det medföljande kodavsnittet, som innehåller en serie instruktioner för att skapa och utforma webbsidor med hjälp av HTML och 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>
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;
}
Den första demonstrationen använder en Flexbox-layout för visuell jämförelse med Grid Layout. Resultatet som visas är följande:
Det är anmärkningsvärt att den sista kolumnen har en större storlek på grund av dess inneboende mått, vilket Flexbox-layoutsystemet hanterar effektivt. För att kunna återge alla kolumner med enhetlig bredd med hjälp av Flexbox måste man dock åsidosätta denna inneboende mätning genom att använda följande metod:
.columns > * {
flex: 1;
}
Gridlayouter är en effektiv lösning när ett specifikt arrangemang av element krävs. Genom att ange antalet kolumner kan man enkelt uppnå en önskad justering utan att behöva använda komplexa CSS-stilar eller JavaScript-manipulationer.
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Här är resultatet:
Att använda Grid på detta sätt ger ytterligare en fördel, eftersom det gör det möjligt för föräldrar att behålla kontrollen över sina barns layout. Detta innebär att nya eller borttagna element inte kommer att störa den övergripande strukturen.
Så när ska du använda Grid eller Flexbox?
Avancerad engelsk version:Grid-layout erbjuder en välorganiserad struktur för det överordnade elementet, vilket ger konsekventa kolumnbredder som förblir enhetliga över olika innehållsstorlekar.
Flexbox erbjuder en anpassningsbar layout som förlitar sig på de inneboende dimensionerna hos dess komponenter, vilket gör den väl lämpad för situationer där flexibilitet och responsivitet är av största vikt.