En begyndervejledning til CSS Grid

Foto af Greg Rakozy på Unsplash

Jeg hørte først om CSS Grid i slutningen af ​​2016. Jeg sad på et af mine første Tech Ladies®-møder, og en deltager nævnte, hvor han hørte, hvor fantastisk det var. Spol frem halvandet år senere, og jeg graver endelig dybere ned i Grid. Som en hengiven Flexbox-bruger kan jeg allerede fortælle, hvordan dette vil være en spilskifter.

Det største spørgsmål, jeg havde, da jeg begyndte at lære om CSS Grid var: hvordan er Grid anderledes end Flexbox? Og jeg fandt ud af, at Grid generelt kan gøre alt, hvad Flexbox kan gøre. Nogle mennesker tænker på, at Grid er til multidimensionelle layout, mens Flexbox skal bruges til endimensionelle layout. Men Grid er også godt til endimensionelle layouts - især hvis du kommer tilbage senere og beslutter, at du vil gøre det layout multidimensionelt.

Opsætning af CSS-gitter

Grid er ekstremt let at konfigurere - alt hvad det kræver er to linjer CSS.

HTML

  
1
  
2
  
3
  
4
  
5
  
6

CSS

.indpakning {
    display: gitter;
    gitter-template-kolonner: 10rem 10rem 10rem;
}

Og voila! Du har et gitter. Alvorligt, det er alt hvad du har brug for. Det er ret godt.

Du vil bemærke, at i modsætning til når du indstiller Flexbox til visning: flex, tilføjelse af display: gitter til din indpakning ikke umiddelbart gør en forskel. Dette skyldes, at du ikke eksplicit definerer, hvor mange kolonner du vil have dit gitter til. Du gør dette med rist-skabelonkolonner, som jeg gjorde ovenfor. Så i dette eksempel indstiller jeg tre kolonner til at have en bredde på 10rem hver.

Grundlæggende CSS-net

Du kan bruge en hvilken som helst værdi, du ønsker, når du indstiller rist-skabelonkolonner, men jeg foreslår, at du holder dig væk fra procenter, medmindre du prøver at tilføje op til 100%. Dette skyldes, at du bliver nødt til at tage din mængde gittermellemrum (som vi dykker lidt efter) i betragtning, og det kan blive lidt vanskelig.

Eksplicit vs implicitte spor

Før jeg taler om eksplicitte og implicitte spor, lad os først tale om, hvad spor er. Spor er, hvordan kolonner og rækker nummereres. I stedet for at tælle de enkelte kolonner og rækker af sig selv, i CSS Grid tæller du dem efter sporlinjerne. Her er det gitter, vi startede med - jeg har nummereret alle sporene og kolonner for at gøre det lidt lettere for dig at se.

CSS-gitter med kolonnelinjer og række linjer nummereret

Du kan se, at vi faktisk har fire kolonnelinjer og tre række linjer. Dette hjælper, når du placerer dine varer på nettet.

En hurtig sidebemærkning: Hvis du bruger Firefox's Developer Edition (beta-versionen af ​​den almindelige Firefox), har den faktisk nogle gode dev-værktøjer til at se numrene på kolonnen og rækkerne. Hvis du inspicerer dit indpakningselement og derefter går til fanebladet layout, skal du markere afkrydsningsfeltet i din indpakning, og nu vil dit gitter se ud som nedenfor! Jeg håber virkelig, at Chrome tilføjer en inspektionsfunktion som denne i fremtiden. Det er meget nyttigt.

Firefox Developer Edition Inspector Tools

Lad os gå tilbage til forskellen mellem eksplicit og implicit spor. Hvis vi tager vores kode ovenfra, vil du bemærke, at vi kun har angivet vores kolonner. I dette tilfælde har vi eksplicit indstillet vores kolonner til at have tre, men vi har implicit indstillet vores rækker. Vi har seks emner, men alle disse elementer kan naturligvis ikke passe ind i tre kolonner, så en anden række bliver implicit indstillet.

Dette er en smule forvirrende, så jeg vil bestemt anbefale at skabe rod med CSS Grid på egen hånd for at se forskellen mellem eksplicit og implicit spor.

Tilføjelse af Grid-Gap

Tænk på gitterafstand som margin, bortset fra at det kun tilføjes mellem elementer og ikke uden for gitteret. Jeg har fået så mange tilfælde, når jeg tilføjer margin på elementer i et Flexbox-net kun for at skulle gå til gitterindpakningen og indstille den samme mængde margin, men negativ, for at udligne den margen, der bliver sat uden for nettet. Heldigvis med CSS Grid, behøver du ikke tackle det.

Lad os tage vores eksempel CSS ovenfor og tilføje noget gitter-gap.

.indpakning {
  display: gitter;
  gitter-template-kolonner: 10rem 10rem 10rem;
  gitter-gap: 1rem;
}
CSS Grid med 1rem gitter-gap

Jeg brugte den korthede egenskabsgitter-gap, men du kan definere en eksplicit værdi for kolonnerne og rækkerne ved hjælp af gitterkolonne-spalten og gitter-rækkespalten.

* Bemærk: Chrome 66 ændrer gitterafstand til mellemrum og gitter-søjle-mellemrum / gitter-række-mellemrum til kolonne-mellemrum / række-mellemrum.

Funktionen Gentag ()

Det er ret enkelt at definere, hvor bred du vil have, at hver af dine kolonner skal være, når du bruger rist-skabelon-kolonner med tre kolonner, der alle har samme bredde. Men det er en masse at skrive, hvis du vil have flere kolonner end det. Det er her gentagelsesfunktionen kommer ind.

Her er vores eksempel, vi har brugt med gentagelsesfunktionen (), der er tilføjet.

.indpakning {
  display: gitter;
  gitter-template-kolonner: gentag (3, 10rem);
  gitter-gap: 1rem;
}

Som du kan se i min CSS, indstiller jeg tre kolonner, der skal være 10 rems brede. Dette gitter vil se nøjagtigt ud som det gitter, der er afbildet i vores gitter-gap-eksempel. Ved at bruge funktionen gentag () gør vi bare skrivning af ting lidt enklere og lettere at læse for, når du vil angive en masse kolonner.

Fraktionelle enheder

Fraktionelle enheder eller fr er en ny CSS-længdeenhed introduceret med CSS Grid og en, som jeg kan se mig selv bruge hele tiden. Lad os sige, at vi vil have tre kolonner med samme bredde. I stedet for at indstille bredde: beregne (100% / 3) på elementerne, kan vi bruge brøkdel. Tænk på brøkdel enheder som "ledig plads."

Lad os fortsætte med vores eksempel, som vi har brugt.

.indpakning {
  display: gitter;
  gitter-template-kolonner: 1fr 1fr 1fr;
  gitter-gap: 1rem;
}

Du vil bemærke, at det eneste, jeg ændrede, var rist-skabelonkolonner. Jeg fortæller nu browseren, at jeg vil have tre kolonner, og at jeg vil have, at hver af disse kolonner optager en brøkdel eller en ”ledig plads.” Dette fungerer meget på samme måde som Flexbox's flex-grow-egenskab.

CSS-net ved hjælp af brøksenheder

Årsagen til at hvert element er lidt bredere end i vores tidligere eksempel er fordi de nu optager så meget plads, som de kan, mens de stadig sidder i tre kolonner. I dette tilfælde har jeg ikke indstillet en hård bredde, så de tager hele bredden på min skærm. Jeg ved, at dette er lidt svært at se uden at have det på din egen skærm, så jeg vil bestemt anbefale at rod med dette på egen hånd.

Du behøver heller ikke at indstille alle dine kolonner til 1fr. Nedenfor er et eksempel, hvor jeg har indstillet min første og tredje kolonne til 10 rems, mens min midterste kolonne er 1fr. Du kan også indstille dine kolonner til 2fr, 3fr osv., Og kolonnens genstande optager 2x, 3x (og så videre) mængden af ​​plads.

CSS Grid med kun den midterste kolonne indstillet til 1fr

Størrelse på individuelle gitterelementer

Lad os tale om størrelse på vores individuelle gitterelementer. Du kan ikke placere en hård bredde på individuelle elementer, fordi vi udtrykkeligt indstiller bredden med rist-skabelonkolonner. Men hvad nu hvis du vil, at element fem i vores eksempel skal være bredden på flere kolonner? Vi kan gøre dette ved hjælp af gitterkolonne og span.

.indpakning {
  display: gitter;
  gitter-template-kolonner: gentag (3, 10rem);
  gitter-gap: 1rem;
}
.item5 {
  gitter-søjle: span 2;
}

Du vil se ovenfor, at vi indstiller gitterkolonne for element fem til at være et spændvidde på to, hvilket gør det muligt for element fem at spænde over en bredde på to kolonner.

CSS-gitter med span på et individuelt emne

Men hvad nu hvis du ville have, at artikel fem skal spænde over tre kolonner? Dette er hvad der vil ske.

CSS Grid, der spænder over element fem på tværs af tre kolonner

Da element fem naturligvis starter i den anden kolonne, har vi ikke nok plads til, at den spænder over den samlede bredde, vi har indstillet. Så det går ned til næste række. Du kan anvende det samme koncept fra gitter-kolonne til gitter-række, hvis du ønsker, at et emne skal spænde over flere rækker.

Der er en temmelig enkel løsning til at fikse det tomme rum, der er tilbage fra element fem, der bevæger sig ned ad en række. Det kan bruges, uanset om du indstiller et emne til at spænde en række eller en kolonne - gitter-auto-flow: tæt.

.indpakning {
  display: gitter;
  gitter-template-kolonner: gentag (3, 10rem);
  gitter-gap: 1rem;
  gitter-auto-flow: tæt;
}
.item5 {
  gitter-søjle: span 3;
}

I CSS Grid tjekker gitteret automatisk for at se, om varerne passer. Som jeg sagde ovenfor, hvis en artikel ikke passer, vil den gå til næste linje. Grid-auto-flow: tæt fortæller gitteret at udfylde disse tomme rum med ethvert element, der passer. I dette tilfælde har jeg tilføjet et syvende gitterelement, så gitteret automatisk flytter det og det sjette emne til de tomme pletter.

CSS Grid vil altid oprette poster, der skal gå på et bestemt sted først - i dette tilfælde punkt fem, da det spænder over tre kolonner. Hvis du derefter har et gitter-auto-flow: tæt sæt, ser det efter andre emner, der passer ind i de tomme pletter på gitteret.

CSS-gitter med gitter-auto-flow: tæt

Gitter-auto-flow-egenskaben i sig selv bestemmer i hvilken retning du skal tilføje en ny række eller kolonne, efter at du allerede har defineret dine varer. Række er standard. Jeg ser ikke en stor brugssag til dette udover at bruge gitter-auto-flow: tæt.

Placering af gitterartikler

I vores eksempel med dimensionering af individuelle gitterelementer satte vi oprindeligt punkt fem til gitterkolonne: span 2, som gjorde det muligt for element fem at spænde over to kolonner. Faktisk er gitter-kolonne kortfattet for gitter-søjle-start og gitter-søjle-ende. Det samme gælder også for gitterrækker.

Så teknisk set indstillede vi punkt fem til at være gitter-søjle-start: span 2 og gitter-søjle-ende: auto. Grundlæggende fortalte vi gitteret om at starte punkt fem, hvor det naturligvis ville være, men gå dobbelt så stort.

Lad os arbejde med punkt fem igen, og jeg vil vise dig dette ved hjælp af Firefox Developer Edition's inspektionsværktøjer, så det er lettere for dig at se, hvilket spor linjepost fem er på. Jeg har også tilføjet et par flere netværkselementer.

.indpakning {
  display: gitter;
  gitter-template-kolonner: gentag (3, 10rem);
  gitter-gap: 1rem;
}
.item5 {
  gitter-kolonne-start: 1;
  gitter-kolonne-ende: 3;
}

CSS Grid vil placere alle elementerne før vores femte, stoppe og så se, hvor vi startede og sluttede element fem, og placere det, hvor vi fortalte det. Kortfattet af dette ville være gitter-kolonne: 1/3, hvor 1 er vores startværdi og 3 er vores slutværdi.

CSS Grid vha. Raster-kolonne-start og raster-kolonne-ende

Du kan også fortælle et individuelt gitterelement, hvor bredt du ønsker, at det skal spænde, og hvor du vil have det til at ende. Jeg bruger egenskaben shorthand grid-column i dette eksempel, så jeg fortæller element fem om at spænde over to kolonner, der slutter på sporet linje fire.

.indpakning {
  display: gitter;
  gitter-template-kolonner: gentag (3, 10rem);
  gitter-gap: 1rem;
}
.item5 {
  gitter-søjle: span 2/4;
}
CSS-gitter med gitter-søjle korthusegenskab

Hvis du vil have, at dit objekt skal spænde over hele bredden af ​​gitteret, men ikke ved, hvor bredt dit gitter er, kan du indstille gitterkolonne: 1 / -1. Grundlæggende fortæller -1-værdien, at dit element skal gå hele vejen hen til det sidste spor. Hvis du gør dette med rækker, vil du bemærke, at din vare muligvis ikke går helt til bunden af ​​dit gitter. Det vil kun gå til bunden af ​​dine eksplicitte rækker, ikke dine implicitte rækker.

Ressourcer

Her er nogle ressourcer, som jeg varmt kan anbefale til et dybere dyb ned i CSS Grid!

  • Wes Bos 'CSS Grid Tutorial - det er helt gratis og det er her jeg lærte om gitter. Jeg elsker hans undervisningstil!
  • CSS Tricks 'komplette guide til CSS Grid - dette har nogle gode snyderik til, når du sidder fast på et bestemt aspekt af Grid.
  • CSS Grid Garden - en sjov måde at øve på, hvad du har lært om CSS Grid. Jeg anbefaler at lave en tutorial, før du prøver dette, da det til tider bliver lidt forvirrende.

Tak for at have læst min tutorial om CSS Grid! Se mine andre artikler som Sådan besvares den frygtede 'Fortæl mig om dig selv' Interviewspørgsmål, 'Hvorfor du skulle leje en Bootcamp Grad eller min historie om, hvordan jeg blev udvikler.

Og sørg for at følge mig på Twitter for masser af tweets om tech, og hvis jeg er ærlig, også masser af tweets om hunde.