Utforsk forskjellene mellom disse moderne CSS-layoutmetodene med et praktisk problem: å stille opp kolonner.
Når det gjelder CSS-oppsett, er de to hovedverktøyene du har til rådighet Grid og Flexbox. Selv om begge er fantastiske til å lage oppsett, tjener de forskjellige formål og har forskjellige styrker og svakheter.
Lær hvordan begge layoutmetodene oppfører seg og når du skal bruke den ene fremfor den andre.
Den forskjellige oppførselen til CSS Flexbox og Grid
For å hjelpe med å visualisere ting, lag en index.html fil i din foretrukne mappe og lim inn følgende 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>
Begge divene inneholder nøyaktig samme barn, slik at du kan bruke et annet system på hver og sammenligne dem.
Du kan også se at HTML-en importerer en stilarkfil med navnet style.css. Lag denne filen i samme mappe som index.html og lim inn følgende stiler i den:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Siden din skal se slik ut:
Nå, for å snu den første i en flex-kolonne, legg til følgende kode i stilarket ditt:
.flex-container {
display: flex;
}
Dette er resultatet:
De flex-beholder div legger nå ut sine underordnede elementer i kolonner. Disse kolonnene er fleksible og responsive – de tilpasser bredden basert på tilgjengelig plass i visningsporten. Denne oppførselen er en av de viktigste grunnleggende konsepter bak Flexbox.
For å forhindre overfylte kolonner i flex-beholder, kan du bruke flex-wrap eiendom:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Hvis det ikke er nok plass til at de underordnede elementene får plass på én linje, vil de nå vikle seg rundt og fortsette på den neste.
Bruk nå et rutenettoppsett på den andre bruker denne CSS:
.grid-container {
display: grid;
}
Ingenting vil skje med erklæringen ovenfor alene fordi standardoppførselen til Grid skaper rader som stables oppå hverandre.
For å bytte til en kolonnevisning, må du endre grid-auto-flow eiendom (som er rad som standard):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Nå er resultatet her:
For å spesifisere nøyaktig antall kolonner du vil ha på hver linje, bruk rutenett-mal-kolonner:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Denne verdien oppretter fem like brede kolonner. For å få en innpakningsatferd som ligner på Flexbox, kan du bruke responsive egenskaper som automatisk tilpasning og min-maks:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Du vil ofte høre Flexbox og Grid referert til som henholdsvis endimensjonal og todimensjonal. Det er imidlertid ikke den fulle sannheten, for både Flexbox og Grid kan lage en todimensjonalt layoutsystem. De bare gjør det på forskjellige måter, med forskjellige begrensninger.
Det som er viktigst er måten du kan kontrollere det endimensjonale aspektet av oppsettet på. Tenk for eksempel på følgende bilde:
Se hvor konsistent Grid-kolonnen er og hvor ujevn hver kolonne i Flexbox er. Hver rad/kolonne i en flexbeholder er uavhengig av den andre. Så noen kan være større enn andre, avhengig av størrelsen på innholdet. Disse er mindre som kolonner og mer som uavhengige blokker.
Grid fungerer annerledes, ved å sette opp et 2D-rutenett med kolonner låst som standard. En kolonne med kort tekst vil ha samme størrelse som en med mye lengre tekst, som bildet ovenfor viser.
Oppsummert er CSS Grid litt mer strukturert, mens Flexbox er en mer fleksibelt og responsivt layoutsystem. Disse alternative layoutsystemene er godt navngitte!
Når du skal bruke Flexbox
Vil du stole på den iboende størrelsen på hver kolonne/rad, som definert av innholdet? Eller ønsker du å ha strukturert kontroll fra foreldrenes perspektiv? Hvis svaret ditt er det første, så er Flexbox den perfekte løsningen for deg.
For å demonstrere dette, bør du vurdere en horisontal navigasjonsmeny. Erstatt markeringen i tagger med dette:
<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>
Erstatt markeringen i CSS-filen med denne:
.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;
}
Her er resultatet:
Nå transformerer du den første navigasjonen til et fleksibelt oppsett og det andre til et rutenettoppsett ved å legge til følgende 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));
}
Sammenlign resultatene for å se hvilken som var best egnet:
Fra bildet ovenfor kan du se at Flexbox er den perfekte løsningen i dette tilfellet. Du har gjenstander som du vil legge ved siden av hverandre og opprettholde sin egen størrelse (stor eller liten avhengig av tekstlengden). Med Grid har hver celle en fast bredde, og den ser ikke like bra ut – i det minste med ren tekstlenker.
Når du skal bruke CSS Grid
Et sted Grid virkelig utmerker seg er når du ønsker å lage et stivt system fra forelderen. Et eksempel er et sett med kortelementer som skal være like brede, selv om de inneholder forskjellige mengder innhold.
Bytt ut markeringen inne i tagger med dette:
<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>
Legg til denne CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Du starter med en Flexbox-skjerm for å se hvordan den ser ut, slik at du kan sammenligne den med rutenettskjermen. Her er utgangen:
Legg merke til hvordan den siste kolonnen er større enn andre på grunn av dens iboende størrelse, som er det Flexbox håndterer godt. Men for å få dem til samme bredde ved å bruke Flexbox, må du gå mot den iboende størrelsen ved å legge til følgende:
.columns > * {
flex: 1;
}
Dette gjør susen. Men Grid er bedre egnet for tilfeller som dette. Du spesifiserer bare antall kolonner, og du er klar:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Her er resultatet:
En annen fordel med å bruke Grid er at forelderen kontrollerer oppsettet til barna. Så du kan legge til og fjerne underordnede elementer uten å bekymre deg for å bryte oppsettet.
Så når bør du bruke Grid eller Flexbox?
Oppsummert er CSS Grid flott når du vil ha en strukturert kontroll fra foreldrenes perspektiv, med lik størrelse på kolonner uavhengig av størrelsen på det individuelle innholdet.
Flexbox, derimot, er ideell når du ønsker et mer fleksibelt system basert på elementers egendimensjonering.
