CSS Gridi kaudsed rajad: automaatse paigutuse loomise valdamine

CSS Grid on võimas paigutustööriist, mis pakub arendajatele uskumatut paindlikkust ja kontrolli veebilehe struktuuri üle. Kuigi selgesõnalised rajad (defineeritud `grid-template-rows` ja `grid-template-columns` abil) on fundamentaalsed, on kaudsete radade mõistmine ja kasutamine võtmetähtsusega, et avada Gridi täielik potentsiaal automaatse paigutuse loomiseks ja reageerivaks disainiks.

Mis on CSS Gridi kaudsed rajad?

Kaudsed rajad luuakse Grid-konteineri poolt automaatselt, kui võrgustiku elemendid paigutatakse väljapoole selgesõnaliselt määratletud võrgustikku. See juhtub, kui:

• Paigutate võrgustikku rohkem elemente, kui on selgesõnaliselt määratletud radasid.
• Kasutate `grid-row-start`, `grid-row-end`, `grid-column-start` või `grid-column-end` omadusi, et paigutada element väljapoole selgesõnalist võrgustikku.

Põhimõtteliselt loob Grid täiendavaid ridu ja/või veerge nende piiridest väljas olevate elementide mahutamiseks, tagades, et need on endiselt osa paigutusest. See automaatne loomine teebki kaudsed rajad nii väärtuslikuks.

Erinevuse mõistmine: selgesõnalised vs. kaudsed rajad

Peamine erinevus seisneb selles, kuidas rajad on defineeritud:

• Selgesõnalised rajad: Defineeritud otse `grid-template-rows` ja `grid-template-columns` abil. Need pakuvad teie paigutusele eelnevalt määratletud struktuuri.
• Kaudsed rajad: Luuakse automaatselt, et mahutada selgesõnalisest võrgustikust väljapoole paigutatud elemente. Nende suurust ja käitumist kontrollivad `grid-auto-rows`, `grid-auto-columns` ja `grid-auto-flow`.

Mõelge selgesõnalistest radadest kui arhitekti joonisest ja kaudsetest radadest kui ehituse ajal tehtud kohandustest, et kõik mugavalt ära mahutada. Mõlemad on hästi disainitud ja funktsionaalse võrgustikpaigutuse jaoks üliolulised.

Kaudsete radade suuruse kontrollimine `grid-auto-rows` ja `grid-auto-columns` abil

Vaikimisi on kaudsete radade kõrgus või laius `auto`. See toob sageli kaasa ootamatuid või ebajärjekindlaid radade suurusi, eriti erineva kõrguse või laiusega sisu puhul. Siin tulevadki appi `grid-auto-rows` ja `grid-auto-columns`.

Need omadused võimaldavad teil määrata kaudselt loodud radade suuruse. Saate kasutada mis tahes kehtivat CSS-ühikut (pikslid, protsendid, `fr`-ühikud, `min-content`, `max-content`, `auto` jne).

Näide: ühtlase rea kõrguse määramine

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Kolm võrdse laiusega veergu */
  grid-auto-rows: 150px; /* Kõik kaudsed read on 150 pikslit kõrged */
}

            

              
                Copy
              
            
          

Selles näites on kõikidel kaudselt loodud ridadel automaatselt 150 piksli kõrgus. See tagab ühtlase vertikaalse rütmi, olenemata nende lahtrite sisust.

Näide: `minmax()` kasutamine paindlike rea kõrguste jaoks

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto); /* Minimaalne kõrgus 150 pikslit, kuid võib sisu mahutamiseks kasvada */
}

            

              
                Copy
              
            
          

Siin kasutame `minmax()` funktsiooni, et määratleda minimaalne kõrgus 150 pikslit, kuid lubame real kasvada kõrgemaks, kui sisu seda nõuab. See tagab hea tasakaalu järjepidevuse ja paindlikkuse vahel.

Radade paigutuse kontrollimine `grid-auto-flow` abil

`grid-auto-flow` määrab, kuidas automaatselt paigutatud elemendid (elemendid, millele pole määratud konkreetseid rea- ja veeruasetusi) võrgustikku sisestatakse. See mõjutab suunda, milles kaudsed rajad luuakse.

Võimalikud väärtused `grid-auto-flow` jaoks on:

• `row` (vaikimisi): Elemendid paigutatakse ridade kaupa. Kui lahter on juba hõivatud, paigutatakse element järgmisesse vabasse lahtrisse reas, luues vajadusel uusi ridu.
• `column`: Elemendid paigutatakse veergude kaupa. Kui lahter on juba hõivatud, paigutatakse element järgmisesse vabasse lahtrisse veerus, luues vajadusel uusi veerge.
• `row dense`: Sarnane `row`-le, kuid püüab täita võrgustikus olevaid "auke" järjestuses varem, isegi kui see tähendab elementide paigutamist ebakorrapäraselt. See võib olla kasulik kompaktsema paigutuse loomiseks.
• `column dense`: Sarnane `column`-ile, kuid püüab täita võrgustikus olevaid "auke" järjestuses varem.

Näide: `grid-auto-flow: column` kasutamine

            
.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}

            

              
                Copy
              
            
          

Kasutades `grid-auto-flow: column`, paigutatakse elemendid võrgustikku veergude kaupa. Kui elemente on rohkem, kui mahub selgesõnaliselt määratletud veergudesse, luuakse nende mahutamiseks uued veerud.

Märksõna `dense` mõistmine

Märksõna `dense` käsib automaatse paigutuse algoritmil püüda täita tühimikke võrgustikpaigutuses. See võib olla eriti kasulik, kui teil on erineva suurusega elemente ja soovite vältida tühjade lahtrite jätmist.

Siiski, olge teadlik, et `dense` kasutamine võib muuta elementide järjekorda võrgustikus. Kui elementide järjekord on oluline semantilistel põhjustel või ligipääsetavuse tagamiseks, vältige `dense` kasutamist või testige selle mõju hoolikalt.

Praktilised näited ja kasutusjuhud

Kaudsed rajad on uskumatult mitmekülgsed ja neid saab kasutada mitmesugustes stsenaariumides.

1. Dünaamilise sisu kuvamine

Dünaamilise sisuga (nt andmebaasist või API-st) tegelemisel, kus elementide arv on teadmata, pakuvad kaudsed rajad sujuvat viisi varieeruva sisu käsitlemiseks. Te ei pea eelnevalt määrama ridade või veergude arvu; Grid kohandub automaatselt.

Näide: Toodete nimekirja kuvamine e-poe API-st. Saate määrata `grid-template-columns` abil toodete arvu reas ja lasta `grid-auto-rows` omadusel hallata vertikaalset vahet. Kui laaditakse rohkem tooteid, loob võrgustik automaatselt uusi ridu nende kuvamiseks.

2. Reageerivad pildigaleriid

Kaudsed rajad võivad lihtsustada reageerivate pildigaleriide loomist. Saate kasutada meediapäringuid, et kohandada veergude arvu vastavalt ekraani suurusele, ja võrgustik haldab automaatselt piltide paigutust.

Näide: Fotogalerii, mis kuvab suurtel ekraanidel 4 pilti reas, keskmistel ekraanidel 2 pilti reas ja väikestel ekraanidel 1 pildi reas. Kasutage `grid-template-columns` meediapäringute sees, et kontrollida veergude arvu, ja kaudsed rajad hoolitsevad ridade loomise eest.

3. Keerulised paigutused muutuva sisuga

Keeruliste paigutuste puhul, kus sisu kõrgused või laiused võivad oluliselt erineda, aitavad kaudsed rajad säilitada ühtlast ja visuaalselt meeldivat struktuuri. Koos `minmax()`-ga saate tagada, et read või veerud on vähemalt teatud suurusega, mahutades samal ajal ka suuremat sisu.

Näide: Uudiste veebisait erineva pikkusega artiklitega. Kasutage `grid-template-columns` peamiste sisualade ja külgriba defineerimiseks ning laske `grid-auto-rows: minmax(200px, auto)`-l hallata artiklikonteinerite kõrgust, tagades, et isegi lühikestel artiklitel on minimaalne kõrgus.

4. "Masonry" (müüritis) stiilis paigutuste loomine

Kuigi see ei ole täiuslik asendus spetsiaalsetele müüritis-teekidele, saab CSS Gridi koos kaudsete radade ja `grid-auto-flow: dense` abil luua lihtsaid müüritiselaadseid paigutusi. See töötab kõige paremini, kui sisuelementidel on suhteliselt sarnased laiused, kuid erinevad kõrgused.

Näide: Erinevate väljavõtete ja piltidega blogipostituste kogumiku kuvamine. Kasutage `grid-template-columns`, et määrata veergude arv, `grid-auto-flow: dense`, et täita tühimikke, ja potentsiaalselt `grid-auto-rows`, et määrata minimaalne rea kõrgus.

Parimad tavad kaudsete radade kasutamiseks

Et kaudseid radasid tõhusalt kasutada ja vältida levinud lõkse, kaaluge neid parimaid tavasid:

• Määratlege alati `grid-auto-rows` ja `grid-auto-columns`: Ärge lootke vaikimisi `auto` suurusele. Määrake kaudsete radade suurus selgesõnaliselt, et tagada järjepidevus ja ennustatavus.
• Kasutage `minmax()` paindlikuks suuruse määramiseks: Kombineerige `minmax()` omadustega `grid-auto-rows` ja `grid-auto-columns`, et luua paindlikke radasid, mis kohanduvad sisuga, säilitades samal ajal minimaalse suuruse.
• Mõistke `grid-auto-flow` omadust: Valige sobiv `grid-auto-flow` väärtus vastavalt soovitud paigutuse järjekorrale ja tihedusele.
• Testige põhjalikult: Testige oma võrgustikpaigutusi erineva pikkusega sisu ja erinevate ekraanisuurustega, et tagada nende ootuspärane käitumine. Pöörake erilist tähelepanu sellele, kuidas kaudseid radasid luuakse ja suurustatakse.
• Arvestage ligipääsetavusega: Olge tähelepanelik elementide paigutamise järjekorra suhtes, eriti kui kasutate `grid-auto-flow: dense`. Veenduge, et visuaalne järjekord vastaks loogilisele järjekorrale puuetega kasutajate jaoks.
• Kasutage arendaja tööriistu: Brauseri arendaja tööriistad pakuvad suurepärast CSS Gridi paigutuste visualiseerimist, sealhulgas kaudseid radasid. Kasutage neid tööriistu oma paigutuste kontrollimiseks ja probleemide lahendamiseks.

Täpsemad tehnikad: selgesõnaliste ja kaudsete radade kombineerimine

CSS Gridi tõeline jõud peitub selgesõnaliste ja kaudsete radade kombineerimises, et luua keerukaid ja kohandatavaid paigutusi. Siin on mõned täpsemad tehnikad:

1. Nimega võrgustikualad ja kaudsed rajad

Saate kasutada nimega võrgustikualasid (`grid-template-areas`), et määratleda oma paigutuse üldine struktuur ja seejärel toetuda kaudsetele radadele dünaamilise sisu paigutamiseks nendes alades.

Näide: Veebisaidi päis ja jalus on defineeritud selgesõnaliste radade ja võrgustikualadega, samas kui põhisisu ala on konfigureeritud kasutama kaudseid radasid artiklite või toodete kuvamiseks.

2. Pesastatud võrgustikud

Võrgustike pesastamine võimaldab teil luua väga keerulisi paigutusi selge ülesannete jaotusega. Saate määratleda peamise võrgustiku selgesõnaliste radadega ja seejärel kasutada kaudseid radasid pesastatud võrgustikes üksikute komponentide paigutuse haldamiseks.

Näide: Töölaudade paigutus, kus peamine võrgustik määratleb üldise struktuuri (külgriba, põhisisu ala jne) ja iga jaotis põhisisu alal kasutab oma andmete kuvamiseks pesastatud võrgustikku koos kaudsete radadega.

3. `repeat()` kasutamine koos `auto-fit` või `auto-fill`-iga

`repeat()` funktsioon koos `auto-fit` või `auto-fill` märksõnadega on äärmiselt kasulik reageerivate võrgustike loomiseks, mis kohandavad automaatselt veergude arvu vastavalt saadaolevale ruumile. Kui seda kombineerida kaudsete radadega, saate luua dünaamilisi ja paindlikke paigutusi, mis kohanduvad igale ekraanisuurusele.

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Loob automaatselt veerud, mis on vähemalt 200 pikslit laiad ja täidavad saadaoleva ruumi */
  grid-auto-rows: minmax(150px, auto);
}

            

              
                Copy
              
            
          

Selles näites loob võrgustik automaatselt nii palju veerge kui võimalik, igaüks minimaalse laiusega 200 pikslit. `1fr` ühik tagab, et veerud täidavad saadaoleva ruumi. Kaudsed read luuakse vastavalt vajadusele, minimaalse kõrgusega 150 pikslit.

Levinud probleemide tõrkeotsing

Kuigi kaudsed rajad on võimsad, võivad need mõnikord põhjustada ootamatut käitumist. Siin on mõned levinud probleemid ja nende lahendamise viisid:

• Ebaühtlased rea või veeru kõrgused: Selle põhjuseks on sageli kaudsete radade vaikimisi `auto` suurus. Veenduge, et olete määratlenud `grid-auto-rows` ja `grid-auto-columns` sobivate väärtustega.
• Elemendid kattuvad: See võib juhtuda, kui te ei ole ettevaatlik elementide paigutamisel, kasutades `grid-row-start`, `grid-row-end`, `grid-column-start` ja `grid-column-end`. Kontrollige oma võrgustiku paigutuse väärtusi, et tagada, et elemendid ei kattu.
• Tühimikud paigutuses: See võib tekkida `grid-auto-flow: dense` kasutamisel, kui elemendid ei ole sobiva suurusega, et täita saadaolevat ruumi. Katsetage erinevate elementide suurustega või kaaluge `grid-auto-flow` väärtuse muutmist.
• Ootamatu elementide järjekord: `grid-auto-flow: dense` kasutamine võib muuta elementide järjekorda. Kui järjekord on oluline, vältige `dense` kasutamist või testige hoolikalt selle mõju ligipääsetavusele ja kasutatavusele.
• Paigutuse purunemine väiksematel ekraanidel: Veenduge, et teie paigutus on reageeriv, kasutades meediapäringuid veergude arvu, rea kõrguste ja muude võrgustiku omaduste kohandamiseks vastavalt ekraani suurusele.

Ligipääsetavuse kaalutlused

CSS Gridi kasutamisel on oluline arvestada ligipääsetavusega, et tagada teie paigutuste kasutatavus kõigile, sealhulgas puuetega kasutajatele.

• Loogiline järjekord: Elementide visuaalne järjekord võrgustikus peaks vastama sisu loogilisele järjekorrale DOM-is. See on eriti oluline kasutajatele, kes navigeerivad ekraanilugejate või klaviatuuri abil.
• Vältige `grid-auto-flow: dense`, kui järjekord on oluline: Nagu varem mainitud, võib `grid-auto-flow: dense` muuta elementide järjekorda. Kui järjekord on oluline, vältige `dense` kasutamist või pakkuge kasutajatele alternatiivseid viise sisu navigeerimiseks.
• Tagage piisav kontrast: Veenduge, et teksti ja taustavärvide vahel oleks piisav kontrast, et sisu oleks loetav ka vaegnägijatele.
• Kasutage semantilist HTML-i: Kasutage oma sisu struktureerimiseks semantilisi HTML-elemente (nt `
  `, `
• Testige abistavate tehnoloogiatega: Testige oma paigutusi ekraanilugejate ja muude abistavate tehnoloogiatega, et tagada nende ligipääsetavus kõigile kasutajatele.

Kokkuvõte

CSS Gridi kaudsed rajad on võimas tööriist paindlike, dünaamiliste ja reageerivate veebipaigutuste loomiseks. Mõistes, kuidas kaudsed rajad töötavad ja kuidas nende suurust ja paigutust kontrollida `grid-auto-rows`, `grid-auto-columns` ja `grid-auto-flow` abil, saate avada CSS Gridi täieliku potentsiaali ja luua keerukaid paigutusi kerge vaevaga.

Pidage meeles, et alati tuleb arvestada ligipääsetavusega ja testida oma paigutusi põhjalikult, et tagada nende kasutatavus kõigile. Harjutamise ja katsetamisega saate kaudsed rajad selgeks ja loote hämmastavaid veebikogemusi.

Olenemata sellest, kas ehitate lihtsat pildigaleriid või keerulist töölauda, aitavad CSS Gridi kaudsed rajad teil saavutada oma paigutuse eesmärgid suurema tõhususe ja paindlikkusega. Võtke omaks automaatse paigutuse loomise jõud ja tõstke oma veebiarenduse oskused uuele tasemele!