Flexbox vs Grid - Sådan opbygges de mest almindelige HTML-layout

Der er så mange gode CSS-ressourcer over hele internettet. Men hvad nu hvis du bare vil have et simpelt layout, og du vil have det NU?

I denne artikel beskriver jeg de 5 mest almindelige websidelayouts og hvordan man bygger dem ved hjælp af både Flexbox og Grid.

Hvordan dette vil fungere

Der er et link under hvert layout til den fulde HTML- og CSS-kode på CodePen.

Bemærk, at jeg bruger SASS til at komponere stildefinitioner, så hvis du vil gøre det samme på din lokale, skal du installere SASS ved hjælp af:

npm i sass -g 

Grundlæggende kortskabelon

Jeg brugte ovenstående kort som basis for websides layout. Den består af tre elementer i lodret retning, så normale divblokke fungerer godt. Jeg bliver dog senere nødt til at gøre det midterste element - tekstafsnittet - strække.

Her gør både Flexbox og Grid arbejdet problemfrit. Jeg foretrækker Flexbox, da det er mere ligetil for mig.

Vinder: Flexbox

CodePen Flexbox, CodePen Grid

Lad os nu begynde at oprette vores forskellige layouter.

# 1 Lodret og vandret centreret kort

Med Flexbox har vi brug for et element, der centrerer vandret, og et andet (underordnet element), der centrerer lodret.

Rækkefølgen af ​​varer er defineret af flex-direction. Hvordan elementet placerer sig i det tilgængelige rum indstilles af align-selfpå elementet eller align-itemspå dets overordnede.

Med Grid har vi brug for tre kolonner og tre rækker. Derefter placerer vi kortet i den midterste celle.

Den vandrette centrering er let. Vi definerer tre kolonner og deres størrelser ved hjælp af, grid-template-columns: auto 33% autoda kortet skal være så bredt som 1/3 af det synlige område.

Problemet er, at vi ikke kender de lodrette dimensioner. Vi ønsker, at øverste og nederste række optager den resterende plads, hvilket ikke er muligt med gitter. Kortet er centreret, men dets højde afhænger af vinduets højde.

Vi kan dog løse dette med et ekstra indpakningselement rundt om kortet og centrere det ved hjælp af margin.

Vinder: Flexbox

CodePen Flexbox, CodePen Grid

# 2 To kort lodret og vandret centreret

Ofte er vi nødt til at centrere mere end blot et element. Disse to kort skal også have samme højde, hvis det ene eller det andet indeholder længere tekst.

Med Flexbox er vi nødt til at pakke begge kort i et andet element og bruge det til at centrere begge kort på én gang.

Vi kan ikke bruge align-itemsher, da det gælder Y-aksen i dette tilfælde. Vi skal definere, hvordan den resterende plads på X-aksen skal fordeles med justify-content: center. Det sikrer, at begge kort er vandret centreret.

Hvis vi udelader det variable højdeproblem i Grid, kan vi opnå det samme resultat, selv uden yderligere indpakningselementer. Denne gang definerer vi gitter med fem kolonner med grid-template-columns: auto 33% 50px 33% auto. Resten forbliver den samme som i det foregående eksempel.

Vinder: Flexbox

CodePen Flexbox, CodePen Grid

# 3 Flere kort med samme bredde og højde

Dette er en anden typisk brugssag for blogs, e-handelswebsteder eller generelt ethvert websted, der viser en slags liste. Vi ønsker, at kortene skal have samme bredde og højde. Højde skal udledes fra det største element på listen.

Dette kan gøres i Flexboxbruger flex-wrap: wrap. Elementer vikles til den næste linje, hvis bredden overstiger den resterende plads på hver linje. Den samme højde bevares dog kun i rækkevidden af ​​en enkelt linje, medmindre du definerer det eksplicit.

Gitterviser sin sande magt her. Dette layout kan oprettes ved hjælp af grid-auto-rows: 1frsom håndhæver den samme højde på alle rækker.

Vinder: Gitter

CodePen Flexbox, CodePen Grid

# 4 Skiftende tekst og billeder lodret og vandret centreret

I dette eksempel har vi tekst med CTA-knapper ledsaget af et billede på den anden side. Begge komponenter skal være lodret centreret, da deres størrelse kan variere.

Dette er et stykke kage til Flexbox. Hver række er et articleelement opdelt i to indpakningsbeholdere, .imgog .content. De kræves til jævn størrelsesfordeling ( flex-basis: 50%).

Lodret centrering af det indre indhold defineres af align-items: center.

Alternationen opnås ved at vende retningen af ​​Flexbox ved flex-direction: row-reversehver ulige artikel.

Gitterhåndterer også denne brugssag pænt. Vi behøver ikke at definere et gigantisk gitter, men snarere et til hvert article.

Det definerer lige så brede kolonner, der er lodret centreret ved hjælp af align-items: center.

Alternativet defineres på celleniveau ved skiftede værdier for grid-column.

Vinder: slips

CodePen Flexbox, CodePen Grid

# 5 Vandret overskrift med menu

For at opnå dette design ved hjælp af Flexbox skal begge sider af headeren repræsenteres af et enkelt element.

Logoet og firmanavnet danner et anchortil venstre, og menuen er et enkelt navelement til højre. Flexbox placerer dem med justify-content: space-between.

Med Grid har vi brug for to kolonner - den ene til logoet og den anden til menuen. Menuen er et andet gitter, der fordeler størrelsen på kolonner jævnt ved hjælp af grid-template-columns: repeat(4, minmax(0, 1fr)).

Problemet her er, at hvis vi vil tilføje et andet element til menuen, er vi også nødt til at justere CSS.

Vinder: Flexbox

CodePen Flexbox, CodePen Grid

Og vinderen er...

Slutresultatet er 5: 2 til fordel for Flexbox, men det betyder ikke, at det bliver den ultimative CSS-vinder. Der er situationer, hvor du skal bruge det ene eller det andet, nogle gange endda begge sammen, for at opnå det, du har brug for.

Hvis du har brug for fleksibel og betinget positionering, skal du bruge Flexbox. Hvis du vil oprette lister eller lignende strukturer, der kræver lige store størrelser eller har en tabelform, skal du bruge gitter.

Som front-end-udvikler kommer du ikke væk med ikke at kende begge dele.

Referencevejledning Flexbox, Referencevejledning Gitter

PS Hvis jeg savnede et layout, du bruger dagligt, så lad mig det vide på Twitter, så forbereder jeg en efterfølger :-)