CSS Grid - Begyndervejledningen

Kom godt i gang

Du er sandsynligvis allerede bekendt med CSS 's boksmodel for regelmæssige elementer. Lad os begynde med en lignende repræsentation af "fugleperspektiv" for CSS Grid:

CSS Grid's anatomi er sammensat af den primære beholder, der kun er dit standard

-element, der har en margin, kant og polstring. For at gøre en overordnet CSS-gittercontainer ud af et hvilket som helst element, skal du tilføje display: gitter til det. Grid's genstande er børn, der er indlejret inde i forældrekontaineren. De defineres normalt som en liste over elementer, der kan repræsentere en header, sidebjælke, sidefod eller lignende webstedlayoutelementer, afhængigt af din applikations design.

I dette tilfælde er der 3

poster. Den tredje strækkes over 2 celler.

Bemærk, at linjer også kan tælles bagud ved hjælp af det negative koordinatsystem.

Risten ovenfor er 5 af 4 celler i dimension. Det defineres som følger:

div # grid {/ * Dette er vores CSS-net forældrekontainer * /
  display: gitter;
  gitter-skabelon-søjler: 100px 100px 100px 100px 100px; / * 5 cols * /
  gitter-template-rækker: 100px 100px 100px 100px; / * 4 rækker * /
}

Antallet af rækker og kolonner antages implicit af antallet af indstillede værdier.

Mellem hver celle er der en linje og et valgfrit hul.

Rækker og kolonner mellem linjerne kaldes gitterets spor.

Der er altid [spor + 1] linjer pr. Dimension.

Derfor vil 5 kolonner have 6 linjer, mens 4 rækker har 5 linjer.

I det følgende eksempel er der 7 kolonner og kun 1 række:

Nogle af de første ting, du vil bemærke om CSS-netadfærden.

Den første vigtige ting, du vil bemærke om CSS-net er, at de ydre linjer ikke påvirkes af mellemrumstørrelsen. Kun indre linjer. Vi vil tage et dyb dykke ned i dette lidt senere i denne tutorial, når vi ser på fraktionerede (fr) enheder.

CSS-gitteret er tovejs.

Dens genstande kan flyde enten vandret (søjle) eller lodret (række). Indstil værdien med egenskaben gitter-auto-flow.

Det fungerer på samme måde som Flex:

Brug af gitter-auto-flow: række eller gitter-auto-strøm: kolonne til at bestemme strømningsretningen for gitterets poster.

Tænk på gitteret på denne abstrakte måde:

Okay - så vi har den grundlæggende idé om, hvordan det fungerer.

Vareplacering

Den kreative del kommer ind, når du står overfor problemet med faktisk at jonglere med vareplaceringerne for at skabe et fornuftigt applikationslayout. CSS-net tilbyder flere egenskaber til at opnå netop det. Vi ser på dem i det næste afsnit i denne tutorial på bare et øjeblik.

Lad os cementere vores viden indtil videre ved at se på disse eksempler:

Jeg brugte kun to

-elementer til emnerne. Derfor gitteret ovenfor.

Implicit og eksplicit indholdsplacering

Men hvad sker der, hvis vi tilføjer endnu et element til listen?

Hvis du tilføjer punkt 3 til det samme layout, udvides det automatisk (blå vare.)

Denne nye afstand oprettes automatisk ved at kopiere værdier fra første række.

Lad os tilføje punkt 4, skal vi?

Og igen, vores CSS-gitter har taget en beslutning om at strække punkt 4 på tværs af den resterende plads på anden række. Dette er fordi net-skabelon-rækker kun specificerede plads nok til 1 række.

Resten er automatisk.

Placering af blå genstande er ikke udtrykkeligt angivet af dig. Dette er implicit (automatisk) placering. De falder bare ind i det rum.

Eksplicit indholdsplacering

Dette er lige hvad du ville forvente af gitterceller, hvis du indstiller tilpassede værdier for alle elementer på listen:

Grundlæggende kan du få kontrol over pladsen på alle på hinanden følgende rækker ved at tilføje flere værdier til egenskaben grid-template-rows. Bemærk, at varerne ikke længere er implicit her. Du definerede dem for at være nøjagtige. (25 px og 75 px)

Automatisk afstand

CSS-gitter tilbyder et par egenskaber til automatisk at strække sine celler over en variabel / ukendt pladsmængde. Her er nøgleeksemplerne for både søjle- og rækkeautomuleringssager:

Det nederste eksempel viser brugen af ​​det automatiske nøgleord. Dette betyder bare, at cellen vil strække sig for at udfylde, uanset hvor meget plads der er tilbage i overordnet beholder, efter at den allerede er befolket af eksplicit placerede genstande.

CSS-netgap

Når du taler om CSS-net, kan du ikke undslippe at tale om huller. Huller er de vandrette og lodrette mellemrum mellem gitterceller.

Huller styres ved hjælp af gitter-søjle-gab og gitter-række-mellemrum egenskaber:

Du kan bruge forskellige huller i begge dimensioner. Dette kan være nyttigt til oprettelse af video- eller billedgallerier:

Huller på tværs af dimensioner (kolonner og rækker) kan variere i størrelse. Men hulstørrelse er specificeret én gang for alle huller i gitteret i en given dimension. Som du kan se her - huller af varierende størrelse inden for den samme dimension er ikke tilladt:

Jeg ønsker virkelig, at der var forskellige størrelseshuller. Jeg kan se, hvordan dette faktisk kan være nyttigt. Nogle foreslår at bruge tomme spor for at opnå en lignende effekt.

FR-enheder (fraktionelle enheder)

Fraktionelle enheder (fr) er unikke for CSS-net.

En brøksenhed tildeler relativt til alle andre elementer i overordnet:

Opførslen ændres, men 1fr forbliver den samme, uanset når der bruges forskellige værdier. Fraktionelle enheder fungerer på samme måde som% -værdier, men de er lettere og mere intuitive at dele rummet med:

Opførsel af fraktionerede enheder (fr enhed) ændres baseret på alle værdier leveret i begge dimensioner.

I dette eksempel vises kun søjlevis opførsel for enkelhedens skyld. Men det fungerer også det samme for rækker. Brug simpelthen egenskaben gitter-skabelon-rækker.

Fraktionelle enheder og deres forhold til huller

Mellemrum defineret ved hjælp af fraktionerede enhedsændringer baseret på huller. Den samme 1fr inden for den samme overordnede vil krympe til en mindre størrelse, når der tilføjes huller:

Her tilføjede vi huller til celler specificeret ved hjælp af fr enheder.

Som du kan se, giver dette dig et ret godt sæt egenskaber til pladsindhold dybest set på enhver måde, du ønsker uden at bekymre dig om pixelværdier.

Denne nye dynamik gør pixel-perfekt design som fortid. Vi vil nu tænke på layoutdesign ved hjælp af den intuitive tilgang!

Endelig, for at give dig en bedre idé om at bruge ikke-hele fraktionelle enheder, her er et sjovt gitter, jeg oprettede. Du kan også specificere dem ved hjælp af flydende punktnumre:

Indholdsplacering

Vi har lige dissekeret CSS-netanatomi. Forhåbentlig får du en bedre idé om, hvordan CSS-net strukturerer indhold. Men nu er vi nødt til at blive kreative og faktisk placere nogle genstande inde i det. Hvordan det gøres kan ændre CSS-netets standardopførsel. Vi undersøger, hvordan det sker i dette afsnit.

For at arrangere dine emner på tværs af celler eller skabelonområder på gitteret henviser du til dem ved linjerne mellem celler. Ikke -lignende spenn.

CSS-gitter tillader brug af spænder til bestemmelse af bredden og højden på indholdsområdet (i celleplads) ligesom tabeller. Vi vil udforske det på bare en smule. Men du kan og sandsynligvis bør specificere startcellen ved hjælp af linienumre eller navngivne linjer (mere om dette i en smule.) Dette afhænger af din præference.

Spænding af celleindhold

Hvad angår indholdsplacering på tværs af flere celler, er det mest indlysende og fristende ting celleomspændende.

Du kan spænde et element på tværs af flere celler.

Vigtigt: Spanning ændrer placeringen af ​​de omgivende genstande.

Spænding ved hjælp af gitter-kolonne og gitter-række

Brug af gitter-kolonne og raster-række egenskaber på selve elementet:

De blå emner ændrede placering, efter at artikel 7 var spredt over flere celler. Og orange genstande blev stukket ned ad en række.

Der er også en anden måde at gøre det samme på ...

Spænding ved hjælp af gitter-kolonne-start

Med gitter-kolonne-slutning, gitter-række-start og raster-række-ende kan du specificere faktiske start- og slutpunkter, som du vil spænde celleindhold over.

Jeg fjernede varerne inden for 15 (orange), fordi vi ikke længere har brug for dem:

Skriv disse egenskaber direkte i det emne, du vil blive påvirket af dem.

Strækning af indhold på tværs af søjle- og række linjer fungerer i begge retninger.

min-indhold og max-indhold

Værdierne min-indhold og max-indhold leveres til gitter-skabelon-søjler eller gitter-skabelon-rækker egenskaber ligesom enhver anden størrelsesrelateret værdi (f.eks. Px, 1fr osv.)

Lad os se på dette eksemplet ovenfor. Det er vores udgangspunkt. Vi ændrer tingene lidt for at se, hvordan min / max-værdierne påvirker celler.

Lad os se, hvilken type resultater der produceres, hvis vi skifter en af ​​kolonnerne til min-indhold og max-indhold:

Med en-ordet tekst er der ingen forskel mellem de observerede resultater, om vi bruger min-indhold eller max-indhold. Her er det fordi hej er et enkelt ord. Dets minimale og maksimale værdier er nøjagtig de samme.

Men ting bliver interessant med mere kompleks tekst. Følgende eksempel viser den grundlæggende idé bag min-indhold og max-indhold:

Her anvendte min-indhold det længste ord i sætningen (fremmed) som basisbredde.

Når du bruger max-indhold, udfyldte hele tekststrengen med mellemrum pladsen.

Men hvad sker der, hvis vi anvender min-indhold eller max-indhold på alle celler?

Jeg bemærkede, at teksten som standard blev centreret, hver gang jeg brugte min-indhold på den, selvom tekstjustering: center ikke var indstillet på emnet.

Billeder og max-indhold

Jeg placerede billedet af denne blå rose i cellen.

Og ligesom forventet, udvidede gitteret til at afsætte nok plads:

Når jeg eksplicit indstiller billedets bredde til 50% bare for at se, hvad der sker, holdt CSS Grid stadig cellebredde til 100% af billedet, men viste billedet på 50% bredde (som forventet) og centrerede det automatisk horisontalt inden for cellen.

Både tekst og billeder (eller ethvert indhold) vil automatisk blive centreret inden i CSS Grid's celler som standard.

Indholdspositionering

Indtil dette tidspunkt har vi talt om Grid's struktur generelt.

I det næste afsnit tager vi et kig på, hvordan man opnår "multi-directional" float inde i celler. Vi bruger naturligvis ikke float-ejendommen her.

Multi-directional 360 ° flyder

Jeg tror ikke, at CSS Grid-specifikationen kalder det. Men det er faktisk muligt at skabe nøjagtigt den ... en 360-graders flydende opførsel.

Dette fungerer på både inline og blokerende elementer! Og jeg tror, ​​dette er min favoritfunktion fra hele CSS Grid's sæt evner.

Alle ni kombinationer er mulige ved hjælp af align-self og justify-self egenskaber.

De forklares nedenfor.

Align Self (align-self)

Denne egenskab hjælper dig med at placere indholdet lodret.

Brug align-self: start med at justere indhold til celleens øverste kant.

Brug align-self: center til at justere indholdet efter dets lodrette midterste.

Brug align-self: slut for at justere indhold til bunden af ​​cellen.

Begrund selv (retfærdiggør selv)

Denne egenskab hjælper dig med at placere indhold vandret.

Brug justify-self: start med at justere indholdet til cellens venstre kant.

Brug justify-self: center for at justere indholdet til dets vandrette midten.

Brug justify-self: slut for at justere indholdet til højre kant af cellen.

Du kan bruge en hvilken som helst af de ni retfærdiggørelse af self x align-self-kombinationer til at justere alt hvor som helst og skabe en flereteretnings flyde.

Skabelonområder

Skabelonområder defineres ved hjælp af egenskaben gitter-skabelonområder.

Bemærk: Skabelonområder for hver række er indkapslet i dobbelt citater - men du kan selvfølgelig også bruge enkelte citater.

Inden for disse citater er hver kolonne adskilt med mellemrum.

I dette eksempel forklarede jeg blot, hvordan man navngiver områder. For at drage fordel af skabelonområder skal du kategorisere rektangulære blokke af celler med samme navn. Tetris-blokke er ikke tilladt. Du kan kun bruge rektangler:

Her til venstre er et område, der spænder over tre celler nedad. CSS Grid behandler det automatisk som en enkelt blok. Det samme gælder Right. I dette enkle eksempel oprettede jeg to kolonner. Men du får ideen. Blokér større områder ved at navngive dem.

For at placere et element i dette område skal du blot tilføje gitter-område: Skabelonnavn. I dette tilfælde er det gitterområde: Venstre eller gitterområde: Højre.

Navn på skabelonområdet kan ikke bruge mellemrum. Jeg brugte bindestreger her.

Praktisk eksempel på områder med CSS-risteskabelon

Vi forstår nu, hvordan man blokerer rektangulære områder. Lad os se på et potentielt virkelighedsscenarie. Her vil jeg demonstrere oprettelsen af ​​et simpelt sted.

Jeg blokerede for et meget simpelt webstedslayout med to sidebjælker og et header- og sidefodsområde. Hovedområdet er i centrum og optager 3 x 2 celleplads:

Vi har kun brug for 5 varer her. Tilføj noget mere, og de vil blive skubbet uden for hovednettet i implicitte celler. Det er fint, hvis du holder styr på dem.

Bare sørg for altid at holde dine områder firkantede eller rektangulære. Ingen Tetris.

Navngivningslinjer

Der er en sidste ting, jeg ønskede at nævne, før vi kommer til slutningen af ​​denne tutorial: navngivning af CSS-netlinjer.

I stedet for altid at henvise til linjer efter deres nummer, kan du også navngive dem. På denne måde vil de være lette at huske, når de strækker emner på tværs af flere celler. Tal kan blive kedelige.

Nedenfor er en gengivelse af, hvordan det ser ud.

Brug firkantede parenteser til at navngive dine linjer. Brug derefter disse navne, når du specificerer længden, som dine varer skal spænde over ved hjælp af / skråstreg.

Afslutningsvis

CSS Grid er et omfattende emne. Derfor er dette ikke en komplet CSS Grid-tutorial om, hvordan man bygger faktiske CSS-layout. Jeg brugte simpelthen et eksempel til hver separat del som udgangspunkt for en ny i nettet.

Forhåbentlig var de oplysninger, jeg leverede her, indsigtsfuld og inspireret interesse i at opbygge websteder ved hjælp af CSS Grid.

CSS Grid er ikke kun et HTML-element. Det er et helt system til opbygning af responsive websteder og webapplikationer.

Dens egenskaber og værdier beskriver konglomeratet af teknikker, som erhvervsveteraner har lært i mere end et årti med byggepladser ved hjælp af fælles HTML-tags.

Følg mig for ugentlig freemium på sociale netværk

Du kan på Twitter til PDF-gave til weekenden.

Følg mig på Instagram for et hurtigt hit af JavaScript.

Du kan følge mig på Facebook for gratis kodning.

Tidsbegrænset tilbud

Diagrammerne i denne tutorial blev påvirket direkte af manuskriptet!

CSS Visual Dictionary 28% FRA for mellemstore læsere.

28% FRA

Kun mellemlæsere:

CSS Visual Dictionary

== tag en kopi ==

Indeholder alle CSS-egenskaber.