Sådan kommer man til CSS-layout i 2017 - og fremover.

Jeg hjælper dig med at forstå, hvordan du skal nærme dig moderne layouts i CSS - det er 2017, og meget er virkelig ændret.

Hvad du lærer

  1. Hvordan CSS-layout blev håndteret før nu.
  2. Forskellene mellem de tidligere tilgange og de moderne standarder
  3. Sådan kommer du i gang med de nye standarder i dag (Flexbox og Grid)
  4. Hvorfor du skal bekymre dig om disse moderne standarder

Introduktion

Jeg kan ikke nøjagtigt huske hvornår, men jeg tror, ​​at jeg i 2012 eller 2013 blev introduceret til webudvikling. Helt mildt prøvede jeg at lære på egen hånd.

Med CSS var en masse ting fornuftigt, bortset fra at lave intelligente CSS-layout. Der var lige så mange layouthacks, som jeg ikke kunne forstå mig selv.

1. Hvordan CSS-layout blev håndteret før nu

Problemet:

Lad os se på et ret standardproblem.

Hvordan opretter du to sidesektioner - en sidefelt og et hovedindholdsområde med lige højder uanset deres indholdsstørrelser?

Se et eksempel på, hvad vi sigter mod nedenfor:

Sidepanel og hovedindholdsområder med lige højde uanset deres indholdsstørrelser

Før nu er det her, hvordan du muligvis har løst problemet.

(i) Opret en div med to elementer, f.eks. en


  
    Lorem ipsum dolor sidder amet.
  
  
  
    Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  

Der er tydeligvis flere tekster i hovedsektionen.

Giv afsnittet til side lidt farve, så det kan skelnes.

.aside {
   farve: #fff;
   baggrund-farve: # 8cacea;
}

(ii) Få begge sektioner til at vises side om side

For at få begge sektioner til at forblive side om side, gør du dette:

til side {
  bredde: 25%;
}
vigtigste {
  bredde: 75%;
}
til side,
main {
  flyde: venstre;
}

Stilen ovenfor opdeler den tilgængelige bredde i bestemte proportioner og flyder derefter både side- og hovedindholdsområderne.

Nedenfor er resultatet:

To indhold ares side om side

Hvis du ikke er opmærksom på at bruge flydere, er det en relativt gammel teknik til at skyve elementer i en navngivet retning, venstre eller højre

Se på billedet ovenfor, problemet er ikke løst endnu. Sidepanelens højde er ikke den samme som for hovedindholdsområdet.

Lad os løse problemet til sidst.

(iii) Brug hak til tabelvisning

For at løse problemet med forskellige højder, skulle du bruge tabellen til at vise hack - jeg hader virkelig dette hack, forresten.

Hvis du IKKE er fortrolig med dette hack, er det her, hvad du skal gøre.

(a) Lav den overordnede beholder (i dette tilfælde kropselementet) til en tabel.

krop {
  display: tabel;
}

(b) Fjern flyderne, og lav de underordnede elementer til bordceller

Børneelementerne i dette eksempel er områderne til side og hovedindhold.

til side,
main {
  display: bordcelle;
}

Når det er gjort, er problemet temmelig løst - i det mindste, sådan var det før.

Begge indholdsområder har nu ensartede højder

2. Forskellene mellem de tidligere tilgange og de moderne standarder

Nu hvor du har en idé om, hvordan problemet blev løst før nu, lad os se på, hvad Flexbox og Grid bringer til bordet.

Flexbox og Grid er de perfekte CSS-layoutløsninger - de moderne standarder. Hvis du skal skrive CSS på et rimeligt niveau, er det uvurderligt at investere i en Flexbox og Grid-uddannelse.

Hvordan løser du det samme problem med Flexbox?

Flexbox-formateringskonteksten sparkes i gang ved at oprette en flex-container.

Glem lingo, det er ret let.

Det overordnede element her er kropselementet. Det huser sidepanelet og hovedindholdsområdet. Så gør det til en flexbeholder:

krop {
  display: flex;
}

Og du får dette:

Flexbox i aktion

Inkluderet display: flex sparker af Flexbox-modellen og starter en flexbox-formateringskontekst.

Glem ikke proportioner:

til side {
  bredde: 25%;
}
vigtigste {
  bredde: 75%;
}

Voila! Problemet er temmelig løst nu.

Problem løst.

Så du, hvor let det var? Enkel og læsbar kode plus INGEN skøre hacks.

Der er meget mere, du kan gøre med Flexbox, såsom:

(a) Midter sidepanelet og hovedindholdsområdet langs den lodrette akse

html, body {
  højde: 100%;
}
krop {
  align-items: center;
}
SIdebar og hovedindholdsområde centreret på tværs af den lodrette akse

(b) Placer kun et af børnene igen

til side {
  align-self: center;
}
Sidefeltet bevægede sig til midten af ​​den lodrette akse

(c) Ændring af kilden rækkefølgen af ​​et underordnet element uden at påvirke html-dokumentet

til side {
  ordre: 2
}
Sidepanelet ser nu ud, som om den blev placeret efter hovedindholdsområdet i html-dokumentet

Jeg har kun ridset overfladen på hvad der er muligt med Flexbox-modellen.

Tal om fleksibilitet og lethed, Flexbox-modellen leverer netop det!

Hvordan løser du det samme problem med gitter?

CSS Grid-layout er den ultimative layoutløsning. Med det kommer en masse magt også.

Lad os tage et kort kig på, hvordan det samme problem kan løses ved hjælp af Grid-layout.

Ligesom Flexbox begynder processen på samme måde.

Lav containerelementet til en gittercontainer.

krop {
  display: gitter;
}

Hvis du er nysgerrig, her er alle CSS på dette tidspunkt:

krop {
  display: gitter;
  baggrundsfarve: #eeeeee;
}
til side {
   farve: #fff;
   baggrund-farve: # 8cacea;
}

Og det er hvad du har:

Første display

BEMÆRK

For at bruge Grid-layoutet skal du have en kompatibel browser, såsom den nye Firefox 52 eller Chrome 57.

Billedet ovenfor ser ikke ud som noget magisk er sket. Nå, endnu ikke.

Hvad hvis du opdeler breddeforhold, som vi har gjort i ovenstående tilfælde:

til side {
  bredde: 25%;
}
vigtigste {
  bredde: 75%
}

Gør dette en forskel?

Opdelingsbreddeforhold på barnet elementer i gitteret

Det gør en forskel, men IKKE den slags, du forventede. Sidepanelet og hovedindholdsområderne er endnu ikke side om side.

Dette bringer mig til at forklare en vigtig del af brugen af ​​gitterlayout.

Efter opsætning af en gitterbeholder med displayet: gitter, skal du definere, hvordan du layouter rækker og kolonner i denne gitterbeholder.

Hvordan gør du det?

krop {
  gitter-template-kolonner: 30% 70%;
}

En one-liner redder dagen. Ingen grund til at definere bredderne af sidepanelet og hovedindholdssektionerne igen.

gitter-skabelon-søjler definerer de proportioner, i hvilke søjlerne i gitteret er lagt

Problem løst.

Hvis du spurgte mig, er det imponerende. Ingen rodede hacks.

Der er endnu mere, du kan gøre med Grid-layoutet - meget mere.

Først skal du give hovedsektionen lidt farve, så eksemplerne, der kommer efter nu, er endnu mere visuelle.

vigtigste {
  baggrundsfarve: rgba (39.174,96, 1);
  farve: #fff;
}

Her er hvad du skal have:

Lad os nu se nogle af de gode ting, som Grid-layout har til dig.

(a) Du kan definere mellemrum mellem kolonner

krop {
  gitter-søjle-spalte: 15 px;
}

Her er resultatet af det:

Nu har du et hul mellem kolonnerne - meget pænere!

Ingen grund til at tilføje marginer til side eller hoved

gitter-søjle-mellemrum definerer afstanden (eller mellemrummet) mellem søjlerne i gitteret.

(b) Du kan have så mange kolonner (eller rækker), som du vil

Eksemplerne ovenfor har kun brugt et sideelement og et hovedelement. Jeg tilføjer to mere af dem.


  
    Lorem ipsum dolor sidder amet.
  
  
  
    Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  
  
    
    Lorem ipsum dolor sidder amet.
  
  
  
    Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  
  
    
    Lorem ipsum dolor sidder amet.
  
  
  
    Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  Lorem ipsum dolor sidder amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies ian, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  
  

Uden at foretage ændringer i CSS, forstår Grid-layoutet, hvad de skal gøre.

Kolonnerne bevarer stadig 30% - 70% layout

#EDIT: selvom dette ikke har noget at gøre med CSS Grid, skal du kun have et hovedelement på en side. Tak, Jason Burnett. Jeg lavede en blind copy-n-paste her.

(b) Du kan definere rækkehuller

Ligesom søjlehuller, der er set tidligere, kan du også definere rækkehuller.

krop {
  gitter-række-spalte: 15px;
}
Sæt rækkehuller.

For at lette er der en kort beskrivelse, hvis både række- og søjlehuller er de samme. Brug bare gitter-spalte: 15px i stedet for at indstille rist-spalte-spalte og gitter-kolonne-spalte til 15 px

(c) Du kan definere størrelser på rækker

Som du definerede de relative størrelser på gitterkolonnen, kan du gøre det samme for rækker.

krop {
  gitter-template-rækker: 200px 300px 400px;
}
Forskellige rækkestørrelser

Nu tager den første, anden og tredje kolonne højderne, henholdsvis 200 px, 300 px og 400 px.

Jeg agter ikke at vise alt det, der er muligt med Grid-layout her, men dette er en ret god introduktion.

Som du kan se, er der en masse layout-supermagter her - alt til din rådighed.

3. Hvordan du kan komme i gang med de nye standarder i dag (Flexbox og Grid)

Du har set et glimt af, hvordan CSS Flexbox og Grid-modellen giver bedre og mere pålidelige layoutløsninger. Så hvordan kommer du i gang med disse?

For en blid introduktion anbefaler jeg, at du praktiserer eksemplerne i denne artikel. Bagefter kan du gå videre til at studere endnu dybere begreber.

Grid-layoutet har i øjeblikket ikke en stor browserstøtte, men du kan eksperimentere nu og bruge det i understøttede browsere via funktionsforespørgsler.

I det afsluttende afsnit af denne artikel inkluderer jeg links til, hvordan jeg muligvis kan hjælpe dig med at opnå en dybere forståelse af moderne CSS-layout - Flexbox og Grid.

4. Hvorfor skal du være interesseret i disse moderne standarder?

Hvis du ikke har fundet ud af, hvorfor du skulle bryde dig om Flexbox og Grid endnu, er her et par problemer, du kan opleve med tidligere layoutløsninger.

(i.) Hvis du i øjeblikket bruger floats og clearfix hacks, ved du, at dette kan blive rodet

(ii.) Du risikerer, at elementer overlapper hinanden, hvis du absolut positionerer - da denne positioneringsmetode tager elementerne ud af dokumentflowet.

(iii.) Du har en masse overflødig markering, hvis du brugte display: tabel til layout.

(iv.) Du oplever problemer med det hvide rum, hvis du bruger inline-block til layoutløsninger.

For at være ærlig, hvis du lige er startet med webudvikling og du ikke betragter din html og css som meget god, er du måske ligeglad med Flexbox og Grid. Din go-to-løsning kan være Bootstrap eller en anden populær ramme.

Hvis du ikke vil have nogle af advarslerne til at bruge sådanne populære rammer, elske spændingen ved at lave ting selv, eller måske du tænker frem, ville mit råd være at få en anstændig Flexbox og Grid-uddannelse.

Jeg ved, at du elskede denne artikel, så anbefal den og hjælp en anden til at lære noget nyt

Vil du blive Pro?

Download mit gratis CSS Grid snyderi, og få også to interaktive Flexbox-kurser af kvalitet gratis!

Få gratis CSS Grid Cheat ark + To kvalitets Flexbox-kurser gratis!

Hent dem nu