Utforsker CSS Grids implisitte rutenett og auto-plasseringskrefter

Når du arbeider med CSS Grid, er det første du må gjøre å sette display: grid på elementet som vi ønsker skal bli en gridcontainer. Deretter definerer vi rutenettet eksplisitt ved å bruke en kombinasjon av grid-template-columns, grid-template-rowsog grid-template-areas. Og derfra er neste trinn å plassere elementer inne i rutenettet.

Dette er den klassiske tilnærmingen som bør brukes, og jeg anbefaler den også. Det er imidlertid en annen tilnærming for å lage rutenett uten noen eksplisitt definisjon. Vi kaller dette implisitt rutenett.

«Eksplisitt, implisitt? Hva i helvete skjer her?"

Merkelige termer, ikke sant? Manuel Matuzovic allerede har en god forklaring av hva vi kan av "implisitt" og "eksplisitt" i CSS Grid, men la oss grave rett inn i hva de specification sier:

De grid-template-rows, grid-template-columnsog grid-template-areas egenskaper definerer et fast antall spor som dannes det eksplisitte rutenettet. Når rutenettelementer er plassert utenfor disse grensene, genererer rutenettbeholderen implisitte rutenettspor ved å legge til implisitte rutenettlinjer til rutenettet. Disse linjene danner sammen med det eksplisitte rutenettet det implisitte rutenettet.

Så, på vanlig engelsk, genererer nettleseren automatisk ekstra rader og kolonner i tilfelle noen elementer tilfeldigvis blir plassert utenfor det definerte rutenettet.

Hva med automatisk plassering?

I likhet med konseptet med implisitt rutenett, automatisk plassering er nettleserens evne til å automatisk plassere elementene inne i rutenettet. Vi trenger ikke alltid å oppgi plasseringen av hver vare.

Gjennom ulike brukstilfeller skal vi se hvordan slike funksjoner kan hjelpe oss med å lage komplekse og dynamiske rutenett med noen få linjer med kode.

Dynamisk sidefelt

Her har vi tre forskjellige oppsett, men vi har bare én rutenettkonfigurasjon som fungerer for dem alle.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Bare én kolonne tar opp all ledig plass. Dette er vårt "eksplisitte" rutenett. Den er satt opp for å passe ett rutenettelement i main rutenettbeholder. Det er alt. Én kolonne og én rad:

Men hva om vi bestemte oss for å slippe et annet element der, si en aside (vår dynamiske sidefelt). Som det er for øyeblikket (og eksplisitt) definert, må rutenettet vårt justeres automatisk for å finne et sted for det elementet. Og hvis vi ikke gjør noe annet med vår CSS, er dette hva DevTools forteller oss som skjer.

Vi kan flytte <aside> til en kolonne ved siden av <section>:

aside {
  grid-column-start: 2;
}

Og her er hva DevTools forteller oss nå:

Vi plasserer elementet vårt i den andre kolonnen, men ... vi har ikke en andre kolonne. Rart, ikke sant? Vi erklærte aldri en andre kolonne på <main> grid container, men nettleseren laget en for oss! Dette er nøkkeldelen fra spesifikasjonen vi så på:

Når rutenettelementer er plassert utenfor disse grensene, genererer rutenettbeholderen implisitte rutenettspor ved å legge til implisitte rutenettlinjer til rutenettet.

Denne kraftige funksjonen lar oss ha dynamiske oppsett. Hvis vi bare har <section> element, alt vi får er én kolonne. Men hvis vi legger til en <aside> element til blandingen, opprettes en ekstra kolonne for å inneholde den.

Vi kunne plassere <aside> før <section> i stedet slik:

aside {
  grid-column-end: -2;
} 

Dette skaper den implisitte kolonnen i starten av rutenettet, i motsetning til den forrige koden som plasserer den implisitte kolonnen på slutten.

Vi kan gjøre det samme lettere ved å bruke grid-auto-flow egenskap for å sette alle implisitte spor til å flyte i en column retning:

Nå er det ikke nødvendig å spesifisere grid-column-start å plassere <aside> element til høyre for <section>! Faktisk vil alle andre rutenettelementer vi bestemmer oss for å kaste inn der når som helst nå flyte i en kolonneretning, hver og en plassert i sine egne implisitte rutenettspor. Perfekt for situasjoner der antall elementer i rutenettet ikke er kjent på forhånd!

Når det er sagt, trenger vi fortsatt grid-column-end hvis vi ønsker å plassere den i en kolonne til venstre for den fordi ellers <aside> vil okkupere den eksplisitte kolonnen som igjen skyver <section> utenfor det eksplisitte rutenettet og tvinger det til å ta den implisitte kolonnen.

Jeg vet jeg vet. Det er litt kronglete. Her er et annet eksempel vi kan bruke for å bedre forstå denne lille finurligheten:

I det første eksemplet spesifiserte vi ingen plassering. I dette tilfellet vil nettleseren først plassere <aside> element i den eksplisitte kolonnen siden det kommer først i DOM. De <section>, i mellomtiden, plasseres automatisk i rutenettkolonnen som nettleseren automatisk (eller implisitt) oppretter for oss.

I det andre eksemplet setter vi <aside> element utenfor det eksplisitte rutenettet:

aside {
  grid-column-end: -2;
}

Nå spiller det ingen rolle <aside> kommer først i HTML. Ved å omdisponere <aside> et annet sted har vi laget <section> element tilgjengelig for å ta den eksplisitte kolonnen.

Bildenett

La oss prøve noe annet med et rutenett med bilder der vi har et stort bilde og noen få miniatyrbilder ved siden av (eller under).

Vi har to rutenettkonfigurasjoner. Men gjett hva? Jeg definerer ikke noe rutenett i det hele tatt! Alt jeg gjør er dette:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Det er overraskende at vi bare trenger én kodelinje for å få til noe slikt, så la oss dissekere hva som skjer og du vil se at det er enklere enn du kanskje tror. Først av alt, grid-area er en stenografiegenskap som kombinerer følgende egenskaper til en enkelt erklæring:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Vente! er det ikke grid-area egenskapen vi bruker til å definere navngitte områder i stedet for hvor elementene starter og slutter på rutenettet?

Ja, men det gjør også mer. Vi kan skrive mye mer om grid-area, men i dette spesielle tilfellet:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Vi kan se det samme når vi åpner DevTools for å utvide stenografiversjonen:

Dette betyr at det første bildeelementet i rutenettet må spenne over tre kolonner og tre rader. Men siden vi ikke definerte noen kolonner eller rader, gjør nettleseren det for oss.

Vi har egentlig plassert det første bildet i HTML-en som tar opp et 3⨉3-rutenett. Det betyr at alle andre bilder vil bli plassert automatisk i de samme tre kolonnene uten å måtte spesifisere noe nytt.

For å oppsummere fortalte vi nettleseren at det første bildet må ta opp plass til tre kolonner og tre rader som vi aldri eksplisitt definerte da vi satte opp rutenettbeholderen. Nettleseren satte disse kolonnene og radene opp for oss. Som et resultat, de resterende bildene i HTML-en flyter rett på plass ved å bruke de samme tre kolonnene og radene. Og siden det første bildet tar opp alle tre kolonnene i den første raden, flyter de resterende bildene inn i flere rader som hver inneholder tre kolonner, hvor hvert bilde tar opp en enkelt kolonne.

Alt dette fra én linje med CSS! Det er kraften til "implisitt" rutenett og automatisk plassering.

For den andre rutenettkonfigurasjonen i den demoen er alt jeg har gjort å endre den automatiske strømningsretningen ved å bruke grid-auto-flow: column på samme måte som vi gjorde tidligere da vi plasserte en <aside> element ved siden av a <section>. Dette tvinger nettleseren til å lage en fjerde kolonne den kan bruke til å plassere de resterende bildene. Og siden vi har tre rader, blir de resterende bildene plassert i samme vertikale kolonne.

Vi må legge til noen få egenskaper til bildene for å sikre at de passer godt inn i rutenettet uten overløp:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Og selvfølgelig kan vi enkelt oppdatere rutenettet for å vurdere flere bilder ved å justere én verdi. Det ville være 3 i stilene for det store bildet. Vi har dette:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Men vi kan legge til en fjerde kolonne ganske enkelt ved å endre den til 4 i stedet:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Enda bedre: la oss sette opp det som en egendefinert egenskap for å gjøre ting enda enklere å oppdatere.

Dynamiske oppsett

Den første brukssaken med sidefeltet var vår første dynamiske layout. Nå skal vi takle mer komplekse oppsett der antall elementer vil diktere rutenettkonfigurasjonen.

I dette eksemplet kan vi ha alt fra ett til fire elementer der rutenettet justeres på en måte som passer til antall elementer uten å etterlate noen vanskelige hull eller manglende mellomrom.

Når vi har ett element, gjør vi ingenting. Elementet vil strekke seg for å fylle den eneste raden og kolonnen som automatisk opprettes av rutenettet.

Bit når vi legger til det andre elementet, lager vi en annen (implisitt) kolonne ved hjelp av grid-column-start: 2.

Når vi legger til et tredje element, bør det ta opp bredden av to kolonner - det er derfor vi brukte grid-column-start: span 2, men bare hvis det er :last-child fordi hvis (og når) vi legger til et fjerde element, bør det bare ta opp en enkelt kolonne.

Legger vi det sammen, har vi det fire rutenettkonfigurasjoner med bare to erklæringer og magien til implisitt rutenett:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

La oss prøve en annen:

Vi gjør ingenting for det første og andre tilfellet der vi bare har ett eller to elementer. Når vi legger til et tredje element, forteller vi imidlertid nettleseren at - så lenge det er :last-child — den skal spenne over to kolonner. Når vi legger til et fjerde element, forteller vi nettleseren at elementet må plasseres i den andre kolonnen.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Begynner du å skjønne? Vi gir nettleseren spesifikke instruksjoner basert på antall elementer (bruker :nth-child), og noen ganger kan én instruksjon endre oppsettet fullstendig.

Det skal bemerkes at størrelsen ikke vil være den samme når vi jobber med forskjellig innhold:

Siden vi ikke definerte noen størrelser for varene våre, tilpasser nettleseren dem automatisk for oss basert på innholdet, og vi kan ende opp med en annen størrelse enn det vi nettopp så. For å overvinne dette, må vi eksplisitt spesifiser at alle kolonnene og radene er like store:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hei, vi har ikke lekt med disse eiendommene ennå! grid-auto-rows og grid-auto-columns angi størrelsen på henholdsvis implisitte rader og kolonner i en rutenettbeholder. Eller, som spesifikasjonen forklarer det:

De grid-auto-columns og grid-auto-rows egenskaper spesifiserer størrelsen på spor som ikke er tildelt en størrelse av grid-template-rows or grid-template-columns.

Her er et annet eksempel hvor vi kan gå opp til seks elementer. Denne gangen lar jeg deg dissekere koden. Ikke bekymre deg, velgerne kan se komplekse ut, men logikken er ganske grei.

Selv med seks elementer trengte vi bare to erklæringer. Se for deg alle de komplekse og dynamiske oppsettene vi kan oppnå med noen få linjer med kode!

Hva skjer med det grid-auto-rows og hvorfor krever det tre verdier? Definerer vi tre rader?

Nei, vi definerer ikke tre rader. Men vi er definere tre verdier som et mønster for våre implisitte rader. Logikken er som følger:

• Hvis vi har én rad, vil den bli dimensjonert med den første verdien.
• Hvis vi har to rader, får den første den første verdien og den andre den andre verdien.
• Hvis vi har tre rader, vil de tre verdiene bli brukt.
• Hvis vi har fire rader (og her kommer den interessante delen), bruker vi de tre verdiene for de tre første radene og vi gjenbruker den første verdien igjen for den fjerde raden. Det er derfor det er et slags mønster som vi gjentar for å dimensjonere alle de implisitte radene.
• Hvis vi har 100 rader, vil de ha en størrelse på tre ganger tre 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1frOsv

I motsetning til grid-template-rows som definerer antall rader og deres størrelser, grid-auto-rows bare størrelser rad som kan bli opprettet underveis.

Hvis vi kommer tilbake til eksemplet vårt, er logikken å ha lik størrelse når to rader opprettes (vi vil bruke 2fr 2fr), men hvis en tredje rad opprettes, gjør vi den litt mindre.

Rutenettmønstre

For denne siste skal vi snakke om mønstre. Du har sannsynligvis sett de to kolonneoppsettene der den ene kolonnen er bredere enn den andre, og hver rad veksler mellom plassering av disse kolonnene.

Denne typen layout kan være vanskelig å få tak i uten å vite nøyaktig hvor mye innhold vi har å gjøre med, men CSS Grids implisitte auto-plasseringskrefter gjør det relativt enkelt.

Ta en titt på koden. Det kan se komplekst ut, men la oss bryte det ned fordi det ender opp med å være ganske enkelt.

Det første du må gjøre er å identifisere mønsteret. Spør deg selv: "Etter hvor mange elementer skal mønsteret gjentas?" I dette tilfellet er det etter hvert fjerde element. Så la oss se på å bruke bare fire elementer for nå:

La oss nå definere rutenettet og sette opp det generelle mønsteret ved å bruke :nth-child velger for å veksle mellom elementer:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Vi sa at mønsteret vårt gjentas hvert fjerde element, så vi vil logisk bruke det 4n + x hvor x varierer fra 1 til 4. Det er litt lettere å forklare mønsteret på denne måten:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfekt, ikke sant? Vi har fire elementer, og gjentar mønsteret på det femte elementet, det niende elementet og så videre.

De :nth-child velgere kan være vanskelige! Chris har en super hjelpsom forklaring på hvordan det hele fungerer, Herunder oppskrifter for å lage forskjellige mønstre.

Nå konfigurerer vi hvert element slik at:

1. Det første elementet må ta to kolonner og starte ved kolonne én (grid-column: 1/span 2).
2. Det andre elementet er plassert i den tredje kolonnen (grid-column-start: 3).
3. Det tredje elementet er plassert i den første kolonnen: (grid-column-start: 1).
4. Det fjerde elementet tar to kolonner og starter ved den andre kolonnen: (grid-column: 2/span 2).

Her er det i CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Vi kan stoppe her og bli ferdige ... men vi kan gjøre det bedre! Nærmere bestemt kan vi fjerne noen deklarasjoner og stole på grids autoplasseringskrefter for å gjøre jobben for oss. Dette er den vanskeligste delen å groke og krever mye øvelse for å kunne identifisere hva som kan fjernes.

Det første vi kan gjøre er å oppdatere grid-column: 1 /span 2 og bare bruke grid-column: span 2 siden nettleseren som standard plasserer det første elementet i den første kolonnen. Vi kan også fjerne dette:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Ved å plassere det første, andre og fjerde elementet, plasserer rutenettet automatisk det tredje elementet på riktig sted. Det betyr at vi sitter igjen med dette:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Men kom igjen, vi kan spasere gjør det bedre! Vi kan også fjerne dette:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Hvorfor? Hvis vi plasserer det fjerde elementet i den andre kolonnen mens vi lar det ta opp to hele kolonner, tvinger vi rutenettet til å lage en tredje implisitt kolonne, noe som gir oss totalt tre kolonner uten eksplisitt å fortelle det om det. Det fjerde elementet kan ikke gå inn i den første raden siden det første elementet også tar to kolonner, så det flyter til neste rad. Denne konfigurasjonen gir oss en tom kolonne i den første raden og en tom i den andre raden.

Jeg tror du kjenner slutten på historien. Nettleseren vil automatisk plassere det andre og tredje elementet på de tomme stedene. Så koden vår blir enda enklere:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Alt som trengs er fem deklarasjoner for å lage et veldig kult og veldig fleksibelt mønster. Optimaliseringsdelen kan være vanskelig, men du blir vant til den og får noen triks med øvelse.

Hvorfor ikke bruke grid-template-columns å definere eksplisitte kolonner siden vi vet antall kolonner?

Vi kan gjøre det! Her er koden for det:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Som du kan se, er koden definitivt mer intuitiv. Vi definerer tre eksplisitte rutenettkolonner og vi forteller nettleseren at det første og det fjerde elementet må ha to kolonner. Jeg anbefaler denne tilnærmingen! Men målet med denne artikkelen er å utforske nye ideer og triks som vi får fra CSS Grids implisitte og automatiske plasseringskrefter.

Den eksplisitte tilnærmingen er mer grei, mens et implisitt rutenett krever at du – unnskyld ordspillet – fyller ut hullene der CSS gjør ekstra arbeid bak kulissene. Til slutt tror jeg at å ha en solid forståelse av implisitte rutenett vil hjelpe deg å bedre forstå CSS Grid-algoritmen. Tross alt er vi ikke her for å studere det som er åpenbart - vi er her for å utforske ville territorier!

La oss prøve et annet mønster, litt raskere denne gangen:

Mønsteret vårt gjentas hvert sjette element. Det tredje og fjerde elementet må hver oppta to fulle rader. Hvis vi plasserer det tredje og det fjerde elementet, ser det ut til at vi ikke trenger å berøre de andre, så la oss prøve følgende:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hmm, ikke bra. Vi må plassere det andre elementet i den første kolonnen. Ellers vil rutenettet automatisk plassere det i den andre kolonnen.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Bedre, men det er fortsatt mer arbeid. Vi må flytte det tredje elementet til toppen. Det er fristende å prøve å plassere den i første rad på denne måten:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Men dette fungerer ikke fordi det tvinger alle 6n + 3 elementer for å bli plassert i samme område som gjør en rotete layout. Den virkelige løsningen er å beholde den opprinnelige definisjonen av det tredje elementet og legge til grid-auto-flow: dense å fylle hullene. Fra MDN:

[Den] "tette" pakkealgoritmen prøver å fylle i hull tidligere i rutenettet, hvis mindre gjenstander kommer opp senere. Dette kan føre til at varer vises ute av drift, da dette vil fylle ut hull etter større varer. Hvis den utelates, brukes en "sparsom" algoritme, der plasseringsalgoritmen bare beveger seg "fremover" i rutenettet når du plasserer elementer, og aldri går tilbake for å fylle hull. Dette sikrer at alle de automatisk plasserte elementene vises "i rekkefølge", selv om dette etterlater hull som kunne ha blitt fylt av senere elementer.

Jeg vet at denne egenskapen ikke er veldig intuitiv, men glem den aldri når du står overfor et plasseringsproblem. Før du prøver forskjellige konfigurasjoner forgjeves, legg det til fordi det kan fikse oppsettet ditt uten ekstra innsats.

Hvorfor ikke alltid legge til denne egenskapen som standard?

Jeg anbefaler det ikke fordi vi i noen tilfeller ikke vil ha den oppførselen. Legg merke til hvordan MDNs forklaring der nevner at det får gjenstander til å flyte "ute av drift" for å fylle hull etter større gjenstander. Visuell rekkefølge er vanligvis like viktig som kilderekkefølgen, spesielt når det gjelder tilgjengelige grensesnitt, og grid-auto-flow: dense kan noen ganger forårsake et misforhold mellom den visuelle og kilderekkefølgen.

Vår siste kode er da:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

En annen? La oss gå!

For denne vil jeg ikke snakke for mye og i stedet vise deg en illustrasjon av koden jeg har brukt. Prøv å se om du forstår hvordan jeg nådde den koden:

Elementene i svart er implisitt plassert i rutenettet. Det skal bemerkes at vi kan få samme layout flere måter enn hvordan jeg kom dit. Kan du finne ut av de også? Hva med å bruke grid-template-columns? Del verkene dine i kommentarfeltet.

Jeg skal gi deg et siste mønster:

Jeg gjør har en løsning for denne, men det er din tur til å øve. Ta alt vi har lært og prøv å kode dette selv og sammenlign det med min løsning. Ikke bekymre deg hvis du avslutter med noe ordrik – det viktigste er å finne en fungerende løsning.

Ønsker mer?

Før vi avslutter vil jeg dele noen Stack Overflow-spørsmål relatert til CSS Grid der jeg hoppet inn med svar som bruker mange av teknikkene vi dekket her sammen. Det er en god liste som viser hvor mange reelle brukstilfeller og situasjoner i den virkelige verden der disse tingene kommer til nytte:

Innpakning opp

CSS Grid har eksistert i årevis, men det er fortsatt mange lite kjente og brukte triks som ikke er mye diskutert. De implisitte rutenett- og autoplasseringsfunksjonene er to av dem!

Og ja, dette kan bli utfordrende! Det har tatt meg mye tid å finne logikken bak implisitte rutenett, og jeg sliter fortsatt med automatisk plassering. Hvis du vil bruke mer tid på å pakke hodet rundt eksplisitte og implisitte rutenett, her er et par ekstra forklaringer og eksempler verdt å sjekke ut:

På samme måte vil du kanskje lese om grid-auto-columns i CSS-Tricks Almanac fordi Mojtaba Seyedi går inn i store detaljer og inkluderer utrolig nyttige bilder for å forklare oppførselen.

Som jeg sa da vi startet, er ikke metodene vi dekket her ment å erstatte de vanlige måtene du allerede kjenner for å bygge rutenett. Jeg utforsker rett og slett forskjellige måter som kan være nyttige i noen tilfeller.