Raziskovanje implicitnih mrež in moči samodejne umestitve CSS Grid

Ko delate z mrežo CSS, morate najprej nastaviti display: grid na elementu, za katerega želimo, da postane vsebnik mreže. Nato izrecno definiramo mrežo s kombinacijo grid-template-columns, grid-template-rowsin grid-template-areas. In od tam naprej je naslednji korak postavitev elementov znotraj mreže.

To je klasičen pristop, ki ga je treba uporabiti in ga tudi priporočam. Vendar pa obstaja še en pristop za ustvarjanje mrež brez izrecne definicije. Temu pravimo implicitna mreža.

»Eksplicitno, implicitno? Kaj za vraga se tukaj dogaja?«

Čudni izrazi, kajne? Manuel Matuzovic že je dobra razlaga tega, kar lahko imenujemo »implicitno« in »eksplicitno« v mreži CSS, vendar poglejmo naravnost v to, o spekifikacija pravi:

O grid-template-rows, grid-template-columnsin grid-template-areas lastnosti določajo fiksno število skladb, ki se oblikujejo eksplicitna mreža. Ko so elementi mreže postavljeni izven teh meja, vsebnik mreže ustvari implicitne sledi mreže tako, da mreži doda implicitne črte mreže. Te črte skupaj z eksplicitno mrežo tvorijo implicitna mreža.

Torej, v navadni angleščini, brskalnik samodejno ustvari dodatne vrstice in stolpce, če so kateri koli elementi postavljeni izven definirane mreže.

Kaj pa samodejna umestitev?

Podobno kot koncept implicitne mreže, samodejna umestitev je zmožnost brskalnika, da samodejno postavi elemente znotraj mreže. Ni nam treba vedno podati položaja vsakega predmeta.

Z različnimi primeri uporabe bomo videli, kako nam lahko te funkcije pomagajo ustvariti kompleksno in dinamično mrežo z nekaj vrsticami kode.

Dinamična stranska vrstica

Tukaj imamo tri različne postavitve, vendar imamo samo eno konfiguracijo mreže, ki deluje za vse.

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

Samo en stolpec zaseda ves prosti prostor. To je naša "eksplicitna" mreža. Nastavljen je tako, da se prilega enemu elementu mreže v main mrežni vsebnik. To je vse. En stolpec in ena vrstica:

Kaj pa, če bi se odločili, da noter spustimo še en element, recimo an aside (naša dinamična stranska vrstica). Kot je trenutno (in izrecno) definirano, se bo morala naša mreža samodejno prilagoditi, da bo našla mesto za ta element. In če z našim CSS ne naredimo ničesar drugega, nam DevTools pove, da se dogaja to.

Lahko premaknemo <aside> v stolpec poleg <section>:

aside {
  grid-column-start: 2;
}

In tukaj je tisto, kar nam zdaj sporoča DevTools:

Naš element postavimo v drugi stolpec, vendar … drugega stolpca nimamo. Čudno, kajne? Nikoli nismo prijavili drugega stolpca na <main> mrežni vsebnik, vendar ga je brskalnik ustvaril za nas! To je ključni del specifikacije, ki smo si jo ogledali:

Ko so elementi mreže postavljeni izven teh meja, vsebnik mreže ustvari implicitne sledi mreže tako, da mreži doda implicitne črte mreže.

Ta močna funkcija nam omogoča dinamične postavitve. Če le imamo <section> element, dobimo le en stolpec. Če pa dodamo še <aside> elementa v mešanico, se ustvari dodaten stolpec, ki ga vsebuje.

Lahko bi postavili <aside> pred <section> namesto tega takole:

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

To ustvari implicitni stolpec na začetku mreže, za razliko od prejšnje kode, ki postavi implicitni stolpec na konec.

Enako lahko naredimo lažje z uporabo grid-auto-flow lastnost za nastavitev vseh implicitnih sledi za pretok v a column smer:

Zdaj ni več potrebe po navedbah grid-column-start postaviti <aside> element desno od <section>! Pravzaprav bo vsak drug element mreže, za katerega se odločimo, da ga bomo kadar koli dodali, zdaj tekel v smeri stolpca, pri čemer bo vsak postavljen v svoje implicitne mrežne tirnice. Popoln za situacije, ko število elementov v mreži ni znano vnaprej!

Kljub temu še vedno potrebujemo grid-column-end če ga želimo postaviti v stolpec levo od njega, ker sicer <aside> bo zasedel eksplicitni stolpec, ki nato potisne <section> zunaj eksplicitne mreže in ga prisili, da vzame implicitni stolpec.

Vem, vem. To je malo zapleteno. Tukaj je še en primer, ki ga lahko uporabimo za boljše razumevanje te majhne domislice:

V prvem primeru nismo navedli nobene umestitve. V tem primeru bo brskalnik najprej postavil <aside> element v eksplicitnem stolpcu, saj je prvi v DOM. The <section>, se medtem samodejno postavi v stolpec mreže, ki ga brskalnik samodejno (ali implicitno) ustvari za nas.

V drugem primeru smo nastavili <aside> element zunaj eksplicitne mreže:

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

Zdaj to ni pomembno <aside> je na prvem mestu v HTML. S prerazporeditvijo <aside> nekje drugje, smo naredili <section> element, ki je na voljo za prevzem eksplicitnega stolpca.

Mreža slike

Poskusimo nekaj drugega z mrežo slik, kjer imamo veliko sliko in nekaj sličic ob njej (ali pod njo).

Imamo dve konfiguraciji mreže. Ampak veš kaj? Sploh ne definiram nobene mreže! Vse kar počnem je to:

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

Presenetljivo je, da potrebujemo samo eno vrstico kode, da izpeljemo kaj takega, zato razčlenimo, kaj se dogaja, in videli boste, da je lažje, kot si morda mislite. Najprej, grid-area je skrajšana lastnost, ki združuje naslednje lastnosti v eno deklaracijo:

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

Počakaj! ni grid-area lastnost, ki jo uporabljamo za definiranje imenovana območja namesto kje se elementi začnejo in končajo na mreži?

Da, vendar naredi tudi več. O tem bi lahko pisali še marsikaj grid-area, ampak v tem konkretnem primeru:

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

Enako lahko vidimo, ko odpremo DevTools za razširitev skrajšane različice:

To pomeni, da se mora prvi slikovni element v mreži raztezati trije stolpci in tri vrstice. Ker pa nismo definirali stolpcev ali vrstic, to namesto nas naredi brskalnik.

Prvo sliko smo v bistvu postavili v HTML, da zavzame mrežo 3⨉3. To pomeni, da bodo vse druge slike samodejno uvrščene v iste tri stolpce, ne da bi bilo treba določiti kaj novega.

Če povzamemo, brskalniku smo povedali, da mora prva slika zavzeti prostor treh stolpcev in treh vrstic, ki jih nismo nikoli izrecno definirali pri nastavitvi vsebnika mreže. Brskalnik nam nastavi te stolpce in vrstice. Kot rezultat, preostale slike v HTML-ju se postavijo na svoje mesto z uporabo istih treh stolpcev in vrstic. In ker prva slika zavzame vse tri stolpce v prvi vrstici, se preostale slike pretakajo v dodatne vrstice, od katerih vsaka vsebuje tri stolpce, kjer vsaka slika zavzame en sam stolpec.

Vse to iz ene vrstice CSS! To je moč »implicitne« mreže« in samodejne umestitve.

Za drugo konfiguracijo mreže v tej predstavitvi sem naredil le spremembo samodejne smeri toka z uporabo grid-auto-flow: column enako kot prej, ko smo postavili an <aside> element poleg a <section>. To prisili brskalnik, da ustvari a Četrti stolpec, ki ga lahko uporabi za postavitev preostalih slik. In ker imamo tri vrstice, se preostale slike postavijo v isti navpični stolpec.

Slikam moramo dodati nekaj lastnosti, da zagotovimo, da se lepo prilegajo mreži brez prelivanja:

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

In seveda lahko preprosto posodobimo mrežo, da upošteva več slik, tako da prilagodimo eno vrednost. To bi bilo 3 v slogih za veliko sliko. Imamo tole:

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

Lahko pa dodamo četrti stolpec preprosto tako, da ga spremenimo v 4 namesto:

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

Še bolje: nastavimo to kot lastnost po meri, da bo stvari še lažje posodabljati.

Dinamične postavitve

Prvi primer uporabe s stransko vrstico je bila naša prva dinamična postavitev. Zdaj se bomo lotili bolj zapletenih postavitev, kjer bo število elementov narekovalo konfiguracijo mreže.

V tem primeru imamo lahko od enega do štirih elementov, kjer se mreža prilagodi tako, da se lepo prilega številu elementov, ne da bi pri tem pustila nerodne vrzeli ali manjkajoče prostore.

Ko imamo en element, ne naredimo ničesar. Element se bo raztegnil, da bo zapolnil edino vrstico in stolpec, ki ju samodejno ustvari mreža.

Ko dodamo drugi element, ustvarimo še en (impliciten) stolpec z uporabo grid-column-start: 2.

Ko dodamo tretji element, bi moral zavzeti širino dveh stolpcev - zato smo uporabili grid-column-start: span 2, vendar le, če je :last-child ker če (in ko) dodamo četrti element, bi ta moral zavzeti samo en stolpec.

Če to seštejemo, imamo štiri konfiguracije mreže samo z dve izjavi in čarovnija implicitne mreže:

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

Poskusimo še eno:

Za prvi in ​​drugi primer, ko imamo le enega ali dva elementa, ne naredimo ničesar. Ko pa dodamo tretji element, brskalniku to povemo - dokler je :last-child — obsegati mora dva stolpca. Ko dodamo četrti element, povemo brskalniku, da mora biti ta element postavljen v drugi stolpec.

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

Ali začenjate dojemati trik? Brskalniku damo posebna navodila glede na število elementov (z uporabo :nth-child) in včasih lahko eno navodilo popolnoma spremeni postavitev.

Upoštevati je treba, da velikost ne bo enaka, če delamo z različno vsebino:

Ker za svoje artikle nismo določili nobenih velikosti, nam jih brskalnik samodejno določi glede na njihovo vsebino in lahko na koncu dobimo drugačno velikost od tiste, ki smo jo pravkar videli. Da bi to premagali, moramo izrecno določite, da so vsi stolpci in vrstice enako veliki:

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

Hej, s temi lastnostmi se še nismo igrali! grid-auto-rows in grid-auto-columns nastavite velikost implicitnih vrstic oziroma stolpcev v vsebniku mreže. Ali kot spec razloži:

O grid-auto-columns in grid-auto-rows lastnosti določajo velikost skladb, ki jim ni dodelil velikosti grid-template-rows or grid-template-columns.

Tukaj je še en primer, kjer lahko dosežemo do šest elementov. Tokrat vam bom dovolil razčleniti kodo. Ne skrbite, izbirniki so morda videti zapleteni, vendar je logika precej preprosta.

Tudi pri šestih elementih smo potrebovali samo dve izjavi. Predstavljajte si vse kompleksne in dinamične postavitve, ki jih lahko dosežemo z nekaj vrsticami kode!

Kaj se s tem dogaja grid-auto-rows in zakaj ima tri vrednosti? Ali definiramo tri vrstice?

Ne, ne definiramo treh vrstic. Ampak mi so definiranje treh vrednosti kot vzorec za naše implicitne vrstice. Logika je naslednja:

• Če imamo eno vrstico, bo dobila velikost s prvo vrednostjo.
• Če imamo dve vrstici, prva dobi prvo vrednost, druga pa drugo vrednost.
• Če imamo tri vrstice, bodo uporabljene tri vrednosti.
• Če imamo štiri vrstice (in tukaj je zanimiv del), uporabimo tri vrednosti za prve tri vrstice in znova uporabimo prvo vrednost za četrto vrstico. Zato je to nekakšen vzorec, ki ga ponavljamo, da določimo velikost vseh implicitnih vrstic.
• Če imamo 100 vrstic, bodo velikosti tri krat tri 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, Itd

Za razliko od grid-template-rows ki določa število vrstic in njihove velikosti, grid-auto-rows samo vrstica velikosti, ki se lahko ustvari na poti.

Če se vrnemo k našemu primeru, je logika enaka velikosti, ko sta ustvarjeni dve vrstici (uporabili bomo 2fr 2fr), če pa se ustvari tretja vrstica, jo naredimo nekoliko manjšo.

Mrežni vzorci

Za to zadnjo bomo govorili o vzorcih. Verjetno ste že videli ti dve postavitvi stolpcev, kjer je en stolpec širši od drugega in vsaka vrstica spreminja postavitev teh stolpcev.

Tovrstno postavitev je lahko tudi težko narediti, ne da bi natančno vedeli, s koliko vsebine imamo opravka, vendar je implicitna moč samodejnega umeščanja CSS Grid relativno preprosta.

Pokukajte v kodo. Morda je videti zapleteno, vendar ga razčlenimo, ker je na koncu precej preprosto.

Prva stvar je prepoznati vzorec. Vprašajte se: "Po koliko elementih naj se vzorec ponovi?" V tem primeru je po vsakih štirih elementih. Torej, poglejmo za zdaj uporabo samo štirih elementov:

Zdaj pa definirajmo mrežo in nastavimo splošni vzorec z uporabo :nth-child izbirnik za menjavanje elementov:

.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) { /* ?? */ }

Rekli smo, da se naš vzorec ponavlja vsake štiri elemente, zato bomo logično uporabili 4n + x Kje x se giblje od 1 do 4. Nekoliko lažje je razložiti vzorec na ta način:

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.

Popolno, kajne? Imamo štiri elemente in ponovimo vzorec na petem elementu, devetem elementu in tako naprej.

Tisti, ki :nth-child selektorji so lahko zapleteni! Chris ima super pomoč razlago, kako vse skupaj deluje, Vključno z recepti za ustvarjanje različnih vzorcev.

Zdaj konfiguriramo vsak element tako, da:

1. Prvi element mora imeti dva stolpca in se začeti pri prvem stolpcu (grid-column: 1/span 2).
2. Drugi element je postavljen v tretji stolpec (grid-column-start: 3).
3. Tretji element je postavljen v prvi stolpec: (grid-column-start: 1).
4. Četrti element ima dva stolpca in se začne pri drugem stolpcu: (grid-column: 2/span 2).

Tukaj je v 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; }

Lahko bi se ustavili tukaj in končali ... vendar lahko naredimo bolje! Natančneje, odstranimo lahko nekatere deklaracije in se zanesemo na pooblastila omrežja za samodejno umestitev, da opravijo delo namesto nas. To je najtežji del grokiranja in zahteva veliko vaje, da lahko ugotovite, kaj je mogoče odstraniti.

Prva stvar, ki jo lahko naredimo, je posodobitev grid-column: 1 /span 2 in uporabljajte samo grid-column: span 2 saj bo brskalnik privzeto postavil prvi element v prvi stolpec. Lahko odstranimo tudi to:

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

Če postavite prvi, drugi in četrti element, mreža samodejno postavi tretji element na pravilno mesto. To pomeni, da nam ostane to:

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

Ampak dajmo, lahko se sprehajamo bolje! Lahko odstranimo tudi to:

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

Zakaj? Če četrti element postavimo v drugi stolpec in mu dovolimo, da zasede dva polna stolpca, prisilimo mrežo, da ustvari tretji implicitni stolpec, kar nam da skupno tri stolpce, ne da bi ji to izrecno naročili. Četrti element ne more iti v prvo vrstico, ker prvi element prav tako zavzema dva stolpca, zato teče v naslednjo vrstico. Ta konfiguracija nam pusti prazen stolpec v prvi vrstici in prazen v drugi vrstici.

Mislim, da poznate konec zgodbe. Brskalnik bo samodejno postavil drugi in tretji element na ta prazna mesta. Tako postane naša koda še enostavnejša:

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

Vse, kar potrebujete, je pet deklaracij, da ustvarite zelo kul in zelo prilagodljiv vzorec. Optimizacijski del je morda težaven, vendar se ga navadiš in z vajo pridobiš nekaj trikov.

Zakaj ne bi uporabili grid-template-columns definirati eksplicitne stolpce, saj poznamo število stolpcev?

To zmoremo! Tukaj je koda zanj:

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

Kot lahko vidite, je koda vsekakor bolj intuitivna. Določimo tri eksplicitne stolpce mreže in povemo brskalniku, da morata prvi in ​​četrti element zavzeti dva stolpca. Zelo priporočam ta pristop! Toda cilj tega članka je raziskati nove zamisli in trike, ki jih dobimo iz implicitnih in samodejnih umestitvenih moči CSS Grid.

Eksplicitni pristop je enostavnejši, medtem ko implicitna mreža zahteva, da – oprostite besedni igri – zapolnite vrzeli, kjer CSS opravlja dodatno delo v zakulisju. Na koncu verjamem, da vam bo dobro razumevanje implicitnih mrež pomagalo bolje razumeti algoritem CSS Grid. Navsezadnje nismo tukaj, da bi preučevali, kar je očitno - tukaj smo, da raziskujemo divja ozemlja!

Poskusimo drug vzorec, tokrat nekoliko hitrejši:

Naš vzorec se ponovi vsakih šest elementov. Tretji in četrti element morata zasesti vsak dve polni vrstici. Če postavimo tretji in četrti element, se zdi, da se nam drugih ni treba dotikati, zato poskusimo naslednje:

.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, ni dobro. Drugi element moramo postaviti v prvi stolpec. V nasprotnem primeru ga bo mreža samodejno postavila v drugi stolpec.

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

Bolje, vendar je še več dela, Tretji element moramo premakniti na vrh. Mamljivo je poskusiti ga postaviti v prvo vrstico na ta način:

.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 
     */
}

Vendar to ne deluje, ker sili vse 6n + 3 elementov, ki jih je treba postaviti na isto območje, kar povzroči zmešano postavitev. Prava rešitev je ohraniti začetno definicijo tretjega elementa in dodati grid-auto-flow: dense da zapolni vrzeli. Iz MDN:

Algoritem [gostega] pakiranja poskuša zapolniti v luknjah prej v mreži, če se kasneje pojavijo manjši predmeti. To lahko povzroči, da so predmeti videti neurejeni, ko bi s tem zapolnili luknje, ki so jih pustili večji predmeti. Če je izpuščen, se uporabi "sparse" algoritem, pri katerem se algoritem za umestitev vedno premakne "naprej" v mreži, ko postavlja elemente, nikoli se ne vrne nazaj, da zapolni luknje. To zagotavlja, da so vsi samodejno umeščeni elementi prikazani »v vrstnem redu«, tudi če to pušča luknje, ki bi jih lahko zapolnili poznejši elementi.

Vem, da ta lastnost ni zelo intuitivna, vendar je nikoli ne pozabite, ko se soočite s težavo pri umestitvi. Preden zaman preizkušate različne konfiguracije, ga dodajte, ker lahko popravi vašo postavitev brez dodatnega truda.

Zakaj te lastnosti ne dodate vedno privzeto?

Tega ne priporočam, ker v nekaterih primerih takšnega vedenja ne želimo. Upoštevajte, kako tamkajšnja razlaga MDN omenja, da povzroči pretok elementov "nepravilno", da zapolni luknje, ki jih pustijo večji predmeti. Vizualni vrstni red je običajno prav tako pomemben kot izvorni vrstni red, zlasti ko gre za dostopne vmesnike in grid-auto-flow: dense lahko včasih povzroči neujemanje med vizualnim in izvornim vrstnim redom.

Naša končna koda je potem:

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

Še en? Pojdimo!

Za tole ne bom preveč govoril in vam namesto tega pokazal ilustracijo kode, ki sem jo uporabil. Poskusite videti, ali razumete, kako sem prišel do te kode:

Elementi v črni barvi so implicitno postavljeni v mrežo. Opozoriti je treba, da lahko isto postavitev dobimo na več načinov, kot sem jaz. Ali lahko ugotovite tudi te? Kaj pa uporaba grid-template-columns? Delite svoja dela v razdelku za komentarje.

Pustil vas bom z zadnjim vzorcem:

Jaz imeti rešitev za to, vendar ste na vrsti za vajo. Vzemite vse, kar smo se naučili, in poskusite to kodirati sami, nato pa primerjajte z mojo rešitvijo. Ne skrbite, če boste končali z nečim besednim – najpomembnejše je najti delujočo rešitev.

Želijo več?

Preden končamo, želim deliti nekaj vprašanj Stack Overflow, povezanih z mrežo CSS, kjer sem vskočil z odgovori, ki uporabljajo številne tehnike, ki smo jih obravnavali tukaj skupaj. To je dober seznam, ki prikazuje, koliko resničnih primerov uporabe in situacij v resničnem svetu se pojavi, ko so te stvari uporabne:

Zavijanje

CSS Grid obstaja že leta, vendar je še vedno veliko malo znanih in uporabljenih trikov, o katerih se ne razpravlja veliko. Implicitna mreža in funkcije samodejne umestitve sta dve izmed njih!

In ja, to lahko postane izziv! Potreboval sem veliko časa, da sem raziskal logiko za implicitnimi mrežami, in še vedno se borim s samodejno umestitvijo. Če želite porabiti več časa za razmišljanje o eksplicitnih in implicitnih mrežah, je tukaj nekaj dodatnih razlag in primerov, ki si jih je vredno ogledati:

Podobno bi morda želeli prebrati o grid-auto-columns v almanahu CSS-Tricks, ker gre Mojtaba Seyedi v zelo podrobnosti in vključuje neverjetno uporabne vizualne elemente, ki pomagajo razložiti vedenje.

Kot sem rekel, ko smo začeli, metode, ki smo jih obravnavali tukaj, niso namenjene nadomestitvi običajnih načinov, ki jih že poznate za gradnjo mrež. Preprosto raziskujem različne načine, ki so lahko v nekaterih primerih koristni.