Udforskning af CSS Grids implicitte gitter og auto-placeringsevner

Når du arbejder med CSS Grid, er den første ting at gøre at indstille display: grid på det element, som vi ønsker skal blive til en gridcontainer. Derefter definerer vi eksplicit gitteret ved hjælp af en kombination af grid-template-columns, grid-template-rowsog grid-template-areas. Og derfra er næste trin at placere elementer inde i gitteret.

Dette er den klassiske tilgang, der bør bruges, og jeg anbefaler den også. Der er dog en anden tilgang til at skabe grids uden nogen eksplicit definition. Vi kalder dette implicit gitter.

"Eksplicit, implicit? Hvad pokker foregår der her?”

Mærkelige udtryk, ikke? Manuel Matuzovic allerede har en god forklaring af, hvad vi kan kalde "implicit" og "eksplicit" i CSS Grid, men lad os grave direkte ind i, hvad og specifikation siger:

grid-template-rows, grid-template-columnsog grid-template-areas egenskaber definerer et fast antal spor, der dannes det eksplicitte gitter. Når gitterelementer er placeret uden for disse grænser, genererer gitterbeholderen implicitte gitterspor ved at tilføje implicitte gitterlinjer til gitteret. Disse linjer danner sammen med det eksplicitte gitter det implicitte gitter.

Så på almindeligt engelsk genererer browseren automatisk ekstra rækker og kolonner, hvis nogen elementer tilfældigvis er placeret uden for det definerede gitter.

Hvad med automatisk placering?

I lighed med begrebet implicit gitter, automatisk placering er browserens evne til automatisk at placere elementerne inde i gitteret. Vi behøver ikke altid at angive placeringen af ​​hver vare.

Gennem forskellige use cases skal vi se, hvordan sådanne funktioner kan hjælpe os med at skabe komplekst og dynamisk gitter med et par linjer kode.

Dynamisk sidebjælke

Her har vi tre forskellige layouts, men vi har kun én gitterkonfiguration, der fungerer for dem alle.

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

Kun én kolonne optager al den ledige plads. Dette er vores "eksplicitte" gitter. Den er sat op til at passe til ét gitterelement i main gitterbeholder. Det er alt. En kolonne og en række:

Men hvad nu hvis vi besluttede at droppe et andet element derinde, siger en aside (vores dynamiske sidebjælke). Som det i øjeblikket (og eksplicit) er defineret, skal vores gitter justeres automatisk for at finde et sted til det element. Og hvis vi ikke gør andet med vores CSS, er her, hvad DevTools fortæller os, der sker.

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

aside {
  grid-column-start: 2;
}

Og her er, hvad DevTools fortæller os nu:

Vi placerer vores element i den anden kolonne, men... vi har ikke en anden kolonne. Underligt, ikke? Vi har aldrig erklæret en anden kolonne på <main> grid container, men browseren skabte en til os! Dette er nøgledelen fra den specifikation, vi så på:

Når gitterelementer er placeret uden for disse grænser, genererer gitterbeholderen implicitte gitterspor ved at tilføje implicitte gitterlinjer til gitteret.

Denne kraftfulde funktion giver os mulighed for at have dynamiske layouts. Hvis vi bare har <section> element, alt vi får er en kolonne. Men hvis vi tilføjer en <aside> element til blandingen, oprettes en ekstra kolonne til at indeholde det.

Vi kunne placere <aside> før <section> i stedet sådan her:

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

Dette opretter den implicitte kolonne i starten af ​​gitteret, i modsætning til den tidligere kode, der placerer den implicitte kolonne i slutningen.

Vi kan gøre det samme nemmere ved at bruge grid-auto-flow egenskab for at sætte alle implicitte spor til at flyde i en column retning:

Nu er der ingen grund til at specificere grid-column-start at placere <aside> element til højre for <section>! Faktisk vil ethvert andet gitterelement, vi beslutter os for at smide derind til enhver tid, nu flyde i en kolonneretning, hver enkelt placeret i sine egne implicitte gitterspor. Perfekt til situationer, hvor antallet af elementer i gitteret ikke er kendt på forhånd!

Når det er sagt, har vi stadig brug for grid-column-end hvis vi ønsker at placere det i en kolonne til venstre for det, fordi ellers <aside> vil optage den eksplicitte kolonne, som igen skubber til <section> uden for det eksplicitte gitter og tvinger det til at tage den implicitte kolonne.

Jeg ved, jeg ved det. Det er lidt indviklet. Her er et andet eksempel, vi kan bruge til bedre at forstå denne lille særhed:

I det første eksempel specificerede vi ikke nogen placering. I dette tilfælde vil browseren først placere <aside> element i den eksplicitte kolonne, da det kommer først i DOM. Det <section>, i mellemtiden, placeres automatisk i gitterkolonnen, som browseren automatisk (eller implicit) opretter til os.

I det andet eksempel indstiller vi <aside> element uden for det eksplicitte gitter:

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

Nu gør det ikke noget <aside> kommer først i HTML. Ved at omplacere <aside> et andet sted har vi lavet <section> element tilgængeligt for at tage den eksplicitte kolonne.

Billedgitter

Lad os prøve noget andet med et gitter af billeder, hvor vi har et stort billede og et par miniaturebilleder ved siden af ​​(eller under det).

Vi har to gitterkonfigurationer. Men gæt hvad? Jeg definerer ikke noget gitter overhovedet! Alt jeg gør er dette:

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

Det er overraskende, at vi kun har brug for én linje kode for at udføre noget som dette, så lad os dissekere, hvad der foregår, og du vil se, at det er nemmere, end du måske tror. Først og fremmest, grid-area er en stenografiegenskab, der kombinerer følgende egenskaber i en enkelt erklæring:

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

Vente! er det ikke grid-area den egenskab, vi bruger til at definere navngivne områder i stedet for hvor elementer starter og slutter på nettet?

Ja, men det gør også mere. Vi kunne skrive meget mere om grid-area, men i dette særlige tilfælde:

.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 åbner DevTools for at udvide stenografiversionen:

Det betyder, at det første billedelement i gitteret skal spænde over tre kolonner , tre rækker. Men da vi ikke definerede nogen kolonner eller rækker, gør browseren det for os.

Vi har i det væsentlige placeret det første billede i HTML'en til at optage et 3⨉3 gitter. Det betyder, at alle andre billeder vil blive placeret automatisk i de samme tre kolonner uden behov for at angive noget nyt.

For at opsummere fortalte vi browseren, at det første billede skal fylde tre kolonner og tre rækker, som vi aldrig eksplicit definerede, da vi satte gitterbeholderen op. Browseren satte disse kolonner og rækker op for os. Som resultat, de resterende billeder i HTML'en flyder lige på plads ved hjælp af de samme tre kolonner og rækker. Og da det første billede fylder alle tre kolonner i den første række, flyder de resterende billeder ind i yderligere rækker, der hver indeholder tre kolonner, hvor hvert billede fylder en enkelt kolonne.

Alt dette fra én linje af CSS! Det er kraften ved "implicit" gitter" og automatisk placering.

For den anden gitterkonfiguration i den demo, er alt, hvad jeg har gjort, at ændre den automatiske flowretning vha grid-auto-flow: column på samme måde som vi gjorde tidligere, da vi placerede en <aside> element ved siden af ​​en <section>. Dette tvinger browseren til at oprette en fjerde kolonne, den kan bruge til at placere de resterende billeder. Og da vi har tre rækker, bliver de resterende billeder placeret i den samme lodrette kolonne.

Vi er nødt til at tilføje et par egenskaber til billederne for at sikre, at de passer pænt inde i gitteret uden overløb:

.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 nemt opdatere gitteret for at overveje flere billeder ved at justere én værdi. Det ville være 3 i stilene til det store billede. Vi har dette:

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

Men vi kunne tilføje en fjerde kolonne blot ved at ændre den til 4 i stedet:

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

Endnu bedre: Lad os konfigurere det som en tilpasset egenskab for at gøre tingene endnu nemmere at opdatere.

Dynamiske layouts

Den første use case med sidebjælken var vores første dynamiske layout. Nu vil vi tackle mere komplekse layouts, hvor antallet af elementer vil diktere gitterkonfigurationen.

I dette eksempel kan vi have alt fra et til fire elementer, hvor gitteret justeres på en måde, der passer fint til antallet af elementer uden at efterlade nogle akavede huller eller manglende mellemrum.

Når vi har ét element, gør vi ingenting. Elementet strækkes for at udfylde den eneste række og kolonne, der automatisk oprettes af gitteret.

Bit når vi tilføjer det andet element, opretter vi en anden (implicit) kolonne ved hjælp af grid-column-start: 2.

Når vi tilføjer et tredje element, bør det optage bredden af ​​to kolonner - det er derfor, vi brugte grid-column-start: span 2, men kun hvis det er :last-child fordi hvis (og hvornår) vi tilføjer et fjerde element, skal det kun tage en enkelt kolonne op.

Når vi lægger det sammen, har vi fire gitterkonfigurationer med kun to erklæringer og magien ved implicit gitter:

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

Lad os prøve en anden:

Vi gør intet for det første og andet tilfælde, hvor vi kun har et eller to elementer. Når vi tilføjer et tredje element, fortæller vi dog browseren det - så længe det er :last-child — den skal strække sig over to kolonner. Når vi tilføjer et fjerde element, fortæller vi browseren, at elementet skal placeres i den anden kolonne.

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

Er du begyndt at få tricket? Vi giver browseren specifikke instruktioner baseret på antallet af elementer (ved hjælp af :nth-child), og nogle gange kan en instruktion ændre layoutet fuldstændigt.

Det skal bemærkes, at størrelsen ikke vil være den samme, når vi arbejder med forskelligt indhold:

Da vi ikke har defineret nogen størrelser for vores varer, tilpasser browseren dem automatisk til os baseret på deres indhold, og vi kan ende med en anden størrelse end den, vi lige har set. For at overvinde dette er vi nødt til udtrykkeligt angiv, at alle kolonner og rækker er lige store:

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

Hej, vi har ikke leget med de ejendomme endnu! grid-auto-rows , grid-auto-columns indstille størrelsen på henholdsvis implicitte rækker og kolonner i en gitterbeholder. Eller som spec forklarer det:

grid-auto-columns , grid-auto-rows egenskaber angiver størrelsen på spor, der ikke er tildelt en størrelse af grid-template-rows or grid-template-columns.

Her er endnu et eksempel, hvor vi kan gå op til seks elementer. Denne gang vil jeg lade dig dissekere koden. Bare rolig, vælgerne kan se komplekse ud, men logikken er ret ligetil.

Selv med seks elementer havde vi kun brug for to erklæringer. Forestil dig alle de komplekse og dynamiske layouts, vi kan opnå med et par linjer kode!

Hvad sker der med det grid-auto-rows og hvorfor kræver det tre værdier? Definerer vi tre rækker?

Nej, vi definerer ikke tre rækker. Men vi er definere tre værdier som et mønster for vores implicitte rækker. Logikken er som følger:

• Hvis vi har en række, vil den få størrelse med den første værdi.
• Hvis vi har to rækker, får den første den første værdi og den anden den anden værdi.
• Hvis vi har tre rækker, vil de tre værdier blive brugt.
• Hvis vi har fire rækker (og her kommer den interessante del), bruger vi de tre værdier for de første tre rækker, og vi genbruger den første værdi igen for den fjerde række. Derfor er det en slags mønster, som vi gentager for at tilpasse alle de implicitte rækker.
• Hvis vi har 100 rækker, vil de have en størrelse på tre gange tre 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1frOsv

I modsætning til grid-template-rows som definerer antallet af rækker og deres størrelser, grid-auto-rows kun størrelser række, der kan blive oprettet undervejs.

Hvis vi vender tilbage til vores eksempel, er logikken at have samme størrelse, når to rækker oprettes (vi vil bruge 2fr 2fr), men hvis der oprettes en tredje række, gør vi den en smule mindre.

Gittermønstre

Til denne sidste vil vi tale om mønstre. Du har sikkert set de to kolonnelayouter, hvor den ene kolonne er bredere end den anden, og hver række skifter placeringen af ​​disse kolonner.

Denne slags layout kan også være svært at få fat på uden at vide præcis, hvor meget indhold vi har med at gøre, men CSS Grids implicitte auto-placeringsbeføjelser gør det til en relativ gnist.

Tag et kig på koden. Det kan se komplekst ud, men lad os nedbryde det, fordi det ender med at være ret ligetil.

Den første ting at gøre er at identificere mønsteret. Spørg dig selv: "Efter hvor mange elementer skal mønsteret gentages?" I dette tilfælde er det efter hvert fjerde element. Så lad os se på at bruge kun fire elementer for nu:

Lad os nu definere gitteret og opsætte det generelle mønster ved hjælp af :nth-child vælger til at veksle mellem 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 sagde, at vores mønster gentager hvert fjerde element, så vi vil logisk bruge det 4n + x hvor x går fra 1 til 4. Det er lidt nemmere at forklare mønsteret på denne måde:

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? Vi har fire elementer, og gentager mønsteret på det femte element, det niende element og så videre.

De :nth-child vælgere kan være vanskelige! Chris har en super hjælpsom forklaring på, hvordan det hele fungerer, herunder opskrifter til at lave forskellige mønstre.

Nu konfigurerer vi hvert element, således at:

1. Det første element skal tage to kolonner og starte ved kolonne et (grid-column: 1/span 2).
2. Det andet element er placeret i den tredje kolonne (grid-column-start: 3).
3. Det tredje element er placeret i den første kolonne: (grid-column-start: 1).
4. Det fjerde element tager to kolonner og starter ved den anden kolonne: (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 kunne stoppe her og være færdige... men vi kan gøre det bedre! Specifikt kan vi fjerne nogle erklæringer og stole på nettets autoplaceringsbeføjelser til at udføre opgaven for os. Dette er den sværeste del at grok og kræver meget øvelse for at kunne identificere, hvad der kan fjernes.

Det første vi kan gøre er at opdatere grid-column: 1 /span 2 og kun brug grid-column: span 2 da browseren som standard placerer det første element i den første kolonne. Vi kan også fjerne dette:

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

Ved at placere det første, andet og fjerde element placerer gitteret automatisk det tredje element på det rigtige sted. Det betyder, at vi står tilbage 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 nu, vi kan slentre gør det bedre! Vi kan også fjerne dette:

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

Hvorfor? Hvis vi placerer det fjerde element i den anden kolonne, mens vi lader det fylde to hele kolonner, tvinger vi gitteret til at oprette en tredje implicit kolonne, hvilket giver os i alt tre kolonner uden eksplicit at fortælle det. Det fjerde element kan ikke gå ind i den første række, da det første element også tager to kolonner, så det flyder til næste række. Denne konfiguration efterlader os med en tom kolonne i den første række og en tom i den anden række.

Jeg tror, ​​du kender slutningen af ​​historien. Browseren vil automatisk placere det andet og tredje element på disse tomme steder. Så vores kode bliver endnu 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; }

Det eneste, der skal til, er fem erklæringer for at skabe et meget cool og meget fleksibelt mønster. Optimeringsdelen kan være tricky, men du vænner dig til det og får nogle tricks med øvelse.

Hvorfor ikke bruge grid-template-columns at definere eksplicitte kolonner, da vi kender antallet af kolonner?

Vi kan gøre det! Her er koden til 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 bestemt mere intuitiv. Vi definerer tre eksplicitte gitterkolonner, og vi fortæller browseren, at det første og det fjerde element skal have to kolonner. Jeg anbefaler stærkt denne tilgang! Men målet med denne artikel er at udforske nye ideer og tricks, som vi får fra CSS Grids implicitte og autoplaceringsbeføjelser.

Den eksplicitte tilgang er mere ligetil, mens et implicit gitter kræver, at du – undskyld ordspillet – udfylder hullerne, hvor CSS udfører yderligere arbejde bag kulisserne. I sidste ende tror jeg, at en solid forståelse af implicitte gitter vil hjælpe dig med bedre at forstå CSS Grid-algoritmen. Vi er trods alt ikke her for at studere det indlysende - vi er her for at udforske vilde territorier!

Lad os prøve et andet mønster, lidt hurtigere denne gang:

Vores mønster gentages hvert sjette element. Det tredje og fjerde element skal hver optage to hele rækker. Hvis vi placerer det tredje og det fjerde element, ser det ud til, at vi ikke behøver at røre ved de andre, så lad os 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 godt. Vi skal placere det andet element i den første kolonne. Ellers vil gitteret automatisk placere det i den anden kolonne.

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

Bedre, men der er stadig mere arbejde. Vi skal flytte det tredje element til toppen. Det er fristende at prøve at placere den i første række på denne måde:

.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 virker ikke, fordi det tvinger alle 6n + 3 elementer for at blive placeret i det samme område, hvilket giver et rodet layout. Den rigtige løsning er at beholde den oprindelige definition af det tredje element og tilføje grid-auto-flow: dense at udfylde hullerne. Fra MDN:

[Den] "tætte" pakningsalgoritme forsøger at fylde i huller tidligere i gitteret, hvis der kommer mindre genstande op senere. Dette kan medføre, at varer vises ude af drift, når det ville udfylde huller efterladt af større varer. Hvis den udelades, bruges en "sparse" algoritme, hvor placeringsalgoritmen kun bevæger sig "frem" i gitteret, når man placerer elementer, aldrig tilbage for at fylde huller. Dette sikrer, at alle de automatisk placerede varer vises "i rækkefølge", selvom dette efterlader huller, der kunne være blevet udfyldt af senere elementer.

Jeg ved, at denne ejendom ikke er særlig intuitiv, men glem den aldrig, når du står over for et placeringsproblem. Før du prøver forskellige konfigurationer forgæves, skal du tilføje det, fordi det kan rette dit layout uden yderligere indsats.

Hvorfor ikke altid tilføje denne egenskab som standard?

Jeg anbefaler det ikke, fordi vi i nogle tilfælde ikke ønsker den adfærd. Bemærk, hvordan MDN's forklaring der nævner, at det får varer til at flyde "uden drift" for at fylde huller efter større varer. Visuel rækkefølge er normalt lige så vigtig som kilderækkefølgen, især når det kommer til tilgængelige grænseflader og grid-auto-flow: dense kan nogle gange forårsage et misforhold mellem den visuelle rækkefølge og kilderækkefølgen.

Vores endelige kode er så:

.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; }

Endnu en? Lad os gå!

Til denne vil jeg ikke tale for meget og i stedet vise dig en illustration af den kode, jeg har brugt. Prøv at se, om du forstår, hvordan jeg nåede den kode:

Elementerne i sort er implicit placeret i gitteret. Det skal bemærkes, at vi kan få det samme layout flere måder, end hvordan jeg kom dertil. Kan du også finde ud af dem? Hvad med at bruge grid-template-columns? Del dine værker i kommentarfeltet.

Jeg vil efterlade dig med et sidste mønster:

Jeg gør har en løsning for denne, men det er din tur til at øve. Tag alt det, vi har lært, og prøv at kode dette selv og sammenlign det med min løsning. Bare rolig, hvis du slutter med noget ordrigt - det vigtigste er at finde en fungerende løsning.

Ønsker mere?

Inden vi slutter, vil jeg dele et par Stack Overflow-spørgsmål relateret til CSS Grid, hvor jeg hoppede ind med svar, der bruger mange af de teknikker, vi dækkede her sammen. Det er en god liste, der viser, hvor mange virkelige use cases og situationer i den virkelige verden, der opstår, hvor disse ting er nyttige:

Indpakning op

CSS Grid har eksisteret i årevis, men der er stadig mange lidt kendte og brugte tricks, som ikke er meget diskuteret. De implicitte gitter- og autoplaceringsfunktioner er to af dem!

Og ja, det kan blive udfordrende! Det har taget mig meget tid at groft logikken bag implicitte gitter, og jeg kæmper stadig med auto-placering. Hvis du vil bruge mere tid på at pakke dit hoved omkring eksplicitte og implicitte gitter, er her et par yderligere forklaringer og eksempler, der er værd at tjekke ud:

På samme måde vil du måske læse om grid-auto-columns i CSS-Tricks Almanac, fordi Mojtaba Seyedi går i detaljer og inkluderer utroligt hjælpsomme billeder til at forklare adfærden.

Som jeg sagde, da vi startede, er de metoder, vi dækkede her, ikke beregnet til at erstatte de almindelige måder, du allerede kender til at bygge grids. Jeg udforsker simpelthen forskellige måder, der kan være nyttige i nogle tilfælde.