CSS Grid Template Columns: Dünaamiliste veergude määratlemise valdamine

CSS Grid on veebipaigutuse revolutsioneerinud, pakkudes enneolematut kontrolli ja paindlikkust. Üks selle põhiomadusi on grid-template-columns atribuut, mis võimaldab teil määratleda oma võrgustiku veergude struktuuri. Selle atribuudi tõhusa kasutamise mõistmine on ülioluline reageerivate ja dünaamiliste paigutuste loomisel, mis kohanduvad erinevate ekraanisuuruste ja sisu nõuetega.

grid-template-columns mõistmine

Atribuut grid-template-columns määrab võrgustikukonteineri veergude arvu ja laiuse. Veerulaiuseid saab defineerida erinevate ühikutega, sealhulgas:

• Fikseeritud pikkused: Pikslid (px), punktid (pt), sentimeetrid (cm), millimeetrid (mm), tollid (in)
• Suhtelised pikkused: Em-id (em), rem-id (rem), vaateakna laius (vw), vaateakna kõrgus (vh)
• Murdosa ühik: fr (esindab murdosa võrgustikukonteineris saadaolevast ruumist)
• Võtmesõnad: auto, min-content, max-content, minmax()

Alustame lihtsa näitega:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

See kood loob kolme veeruga võrgustiku. Esimene ja kolmas veerg võtavad kumbki 1/4 saadaolevast ruumist, samas kui teine veerg võtab 2/4 (ehk 1/2) ruumist.

Fikseeritud vs. suhtelised ühikud

Fikseeritud ja suhteliste ühikute vahel valimine sõltub teie disaini eesmärkidest. Fikseeritud ühikud, nagu pikslid, pakuvad täpset kontrolli veergude laiuste üle, kuid need võivad muuta paigutused vähem paindlikuks ja reageerivaks. Suhtelised ühikud seevastu võimaldavad veergudel proportsionaalselt skaleeruda vastavalt ekraani suurusele või sisule.

Fikseeritud ühikud (pikslid): Kasutage piksleid, kui vajate, et element oleks kindla, muutumatu suurusega. See on reageeriva võrgustiku paigutuse veergude puhul harvem, kuid võib olla kasulik kindlate brändingunõuetega elementide puhul. Näide:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 150px 300px;
}

            

              
                Copy
              
            
          

Suhtelised ühikud (Em-id, Rem-id, vaateakna ühikud): Need ühikud on paindlikumad. em ja rem on seotud fondi suurustega, võimaldades elementidel parema ligipääsetavuse huvides teksti suurusega skaleeruda. vw ja vh on seotud vaateakna suurusega, võimaldades paigutusi, mis kohanduvad erinevate ekraanimõõtmetega. Näide:

            .grid-container {
  display: grid;
  grid-template-columns: 10vw 20vw 70vw;
}

            

              
                Copy
              
            
          

Murdosa ühik (fr)

Ühik fr on võimas tööriist paindlike võrgustikupaigutuste loomiseks. See esindab murdosa võrgustikukonteineris saadaolevast ruumist pärast seda, kui kõik muud fikseeritud suurusega veerud on arvesse võetud. See muudab selle ideaalseks allesjäänud ruumi proportsionaalseks jaotamiseks.

Vaatleme seda näidet:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

            

              
                Copy
              
            
          

Siin on esimene veerg 100 pikslit lai. Ülejäänud ruum jaotatakse teise ja kolmanda veeru vahel, kusjuures teine veerg võtab 1/3 ja kolmas veerg 2/3 ülejäänud ruumist.

Võtmesõnad: auto, min-content, max-content

CSS Grid pakub mitmeid võtmesõnu veergude laiuste määratlemiseks:

• auto: Brauser arvutab veeru laiuse automaatselt selle sisu põhjal.
• min-content: Veeru laiuseks määratakse minimaalne suurus, mis on vajalik sisu mahutamiseks ilma ülevooluta. See võib tähendada pikkade sõnade murdmist.
• max-content: Veeru laiuseks määratakse maksimaalne suurus, mis on vajalik sisu mahutamiseks ilma murdmiseta. See takistab võimalusel sõnade uuele reale murdmist.

Näide auto kasutamisega:

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

            

              
                Copy
              
            
          

Sellisel juhul kohandavad esimene ja kolmas veerg oma laiust vastavalt sisule, samas kui teine veerg võtab ülejäänud ruumi.

Näide min-content ja max-content kasutamisega:

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
}

            

              
                Copy
              
            
          

Esimene veerg on ainult nii lai, kui selle väikseim sisuosa ette näeb, samas kui teine veerg laieneb, et mahutada kogu oma sisu võimalusel ühele reale.

Funktsioon minmax()

Funktsioon minmax() võimaldab määrata veeru minimaalse ja maksimaalse suuruse. See on eriti kasulik veergude loomisel, mis võivad laieneda, et täita saadaolevat ruumi, kuid ei kahane alla teatud suuruse.

Süntaks:

            minmax(min, max)

            

              
                Copy
              
            
          

Näide:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(200px, 1fr) 100px;
}

            

              
                Copy
              
            
          

Selles näites on esimene ja kolmas veerg fikseeritud 100 piksli peale. Teisel veerul on minimaalne laius 200 pikslit ja maksimaalne laius, mis võimaldab tal laieneda ja täita ülejäänud ruumi. Kui ülejäänud ruumi on vähem kui 200px, on teine veerg 200px lai ja võrgustik võib üle voolata või veerud võivad proportsionaalselt kahaneda (sõltuvalt võrgustiku üldistest piirangutest).

Veerudefinitsioonide kordamine funktsiooniga repeat()

Funktsioon repeat() lihtsustab korduvate veerumustrite defineerimist. See võtab kaks argumenti: mustri korduste arv ja muster ise.

Süntaks:

            repeat(number, pattern)

            

              
                Copy
              
            
          

Näide:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

See kood on samaväärne järgmisega:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

Saate kombineerida repeat() funktsiooni ka teiste ühikute ja võtmesõnadega:

            .grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr 200px) auto;
}

            

              
                Copy
              
            
          

See loob võrgustiku järgmise veerustruktuuriga: 100px, 1fr, 200px, 1fr, 200px, auto.

auto-fill ja auto-fit kasutamine funktsiooniga repeat()

Võtmesõnad auto-fill ja auto-fit, mida kasutatakse koos funktsiooniga repeat(), loovad dünaamilisi veerge, mis kohanduvad automaatselt saadaoleva ruumiga. Need on eriti kasulikud reageerivate galeriide või loendite loomisel.

• auto-fill: Loob nii palju veerge kui võimalik ilma konteinerit ületäitmata, isegi kui mõned veerud on tühjad.
• auto-fit: Sarnane auto-fill'iga, kuid ahendab tühjad veerud 0-laiuseks, võimaldades teistel veergudel laieneda ja täita saadaolevat ruumi.

Näide auto-fill kasutamisega:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

See loob nii palju veerge kui võimalik, millest igaühel on minimaalne laius 200 pikslit ja maksimaalne laius, mis võimaldab neil täita saadaolevat ruumi. Kui sisu pole piisavalt, et täita kõiki veerge, jäävad mõned veerud tühjaks, kuid võtavad siiski ruumi.

Näide auto-fit kasutamisega:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

See töötab sarnaselt auto-fill'iga, kuid kui on tühje veerge, ahendatakse need 0-laiuseks ja ülejäänud veerud laienevad ruumi täitmiseks. See on sageli soovitud käitumine reageerivate võrgustike puhul.

Nimetatud võrgustikujooned

Saate võrgustikujoontele nimesid määrata, mis võib muuta teie koodi loetavamaks ja hooldatavamaks. See tehakse, lisades nimed nurksulgudesse atribuutide grid-template-columns (ja grid-template-rows) defineerimisel.

Näide:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}

            

              
                Copy
              
            
          

Selles näites oleme nimetanud esimese võrgustikujoone col-start, teise col-2 ja kolmanda col-end. Seejärel saate neid nimesid kasutada võrgustikuelementide paigutamisel atribuutidega grid-column-start, grid-column-end, grid-row-start ja grid-row-end.

            .grid-item {
  grid-column-start: col-start;
  grid-column-end: col-2;
}

            

              
                Copy
              
            
          

See paigutab võrgustikuelemendi algusega col-start joonel ja lõpuga col-2 joonel.

Praktilised näited ja kasutusjuhud

Siin on mõned praktilised näited, kuidas kasutada grid-template-columns atribuuti reaalsetes olukordades:

1. Reageeriv navigeerimisriba

Navigeerimisriba, mis kohandub erinevate ekraanisuurustega:

            .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px;
}

.logo {
  /* Stiilid logo jaoks */
}

.nav-links {
  display: flex;
  justify-content: space-around;
}

.search-bar {
  /* Stiilid otsinguriba jaoks */
}

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr;
  }
  .nav-links {
    flex-direction: column;
  }
}

            

              
                Copy
              
            
          

Selles näites on navigeerimisribal kolm veergu: üks logo jaoks (auto), üks navigeerimislinkide jaoks (1fr) ja üks otsinguriba jaoks (auto). Väiksematel ekraanidel ahendatakse võrgustik üheks veeruks ja navigeerimislingid paigutatakse vertikaalselt.

2. Pildigalerii

Reageeriv pildigalerii paindliku veergude arvuga:

            .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.gallery-item {
  /* Stiilid galerii elementide jaoks */
}

            

              
                Copy
              
            
          

See loob pildigalerii, mille veerud on vähemalt 250 pikslit laiad ja laienevad, et täita saadaolevat ruumi. Võtmesõna auto-fit tagab, et tühjad veerud ahendatakse ja pildid täidavad konteineri kenasti.

3. Kahe veeruga paigutus külgribaga

Klassikaline kahe veeruga paigutus fikseeritud laiusega külgriba ja paindliku põhisisu alaga:

            .container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.sidebar {
  /* Stiilid külgriba jaoks */
}

.main-content {
  /* Stiilid põhisisu jaoks */
}

            

              
                Copy
              
            
          

Külgribal on fikseeritud laius 250 pikslit, samas kui põhisisu ala võtab ülejäänud ruumi.

4. Keerulised paigutused nimetatud võrgustikualadega

Keerulisemate paigutuste jaoks saate kombineerida grid-template-columns atribuuti grid-template-areas atribuudiga, et määratleda oma võrgustiku spetsiifilised alad.

            .container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  /* Stiilid päise jaoks */
}

.sidebar {
  grid-area: sidebar;
  /* Stiilid külgriba jaoks */
}

.main {
  grid-area: main;
  /* Stiilid põhisisu jaoks */
}

.footer {
  grid-area: footer;
  /* Stiilid jaluse jaoks */
}

            

              
                Copy
              
            
          

See näide defineerib võrgustiku päise, külgriba, põhisisu ala ja jalusega. Atribuut grid-template-areas määrab nendele elementidele kindlad alad. Veerudefinitsioonid kasutavad loetavuse parandamiseks nimetatud võrgustikujooni.

Ligipääsetavuse kaalutlused

CSS Grid'i kasutamisel on oluline arvestada ligipääsetavusega. Veenduge, et teie paigutused oleksid loogilised ja navigeeritavad puuetega kasutajatele. Kasutage semantilisi HTML-elemente ja lisage sobivaid ARIA-atribuute ligipääsetavuse parandamiseks. Näiteks olge tähelepanelik tabulaatorijärjekorra suhtes ja veenduge, et sisu esitatakse loogilises järjekorras, isegi kui see on Grid'iga visuaalselt ümber paigutatud.

Jõudluse optimeerimine

CSS Grid on üldiselt hea jõudlusega, kuid on mõned asjad, mida saate jõudluse optimeerimiseks teha:

• Vältige liigset pesastamist: Hoidke oma võrgustikustruktuurid võimalikult lihtsad, et vähendada renderdamise koormust.
• Kasutage riistvaralist kiirendust: Kasutage CSS-i omadusi, mis käivitavad riistvaralise kiirenduse (nt transform: translateZ(0)), et parandada renderdamise jõudlust.
• Optimeerige pilte: Veenduge, et teie pildid oleksid korralikult optimeeritud, et vähendada lehe laadimisaega.
• Testige erinevatel seadmetel: Testige oma paigutusi põhjalikult erinevatel seadmetel ja brauserites, et tuvastada ja lahendada kõik jõudlusprobleemid.

CSS Grid paigutuste silumine

Kaasaegsed brauserid pakuvad suurepäraseid arendajatööriistu CSS Grid paigutuste silumiseks. Chrome'is, Firefoxis ja Edge'is saate uurida võrgustikukonteinerit ja visualiseerida võrgustikujooni, veergude laiuseid ja ridade kõrguseid. Need tööriistad aitavad teil paigutusprobleeme kiiresti tuvastada ja lahendada.

Parimad praktikad grid-template-columns kasutamiseks

• Planeerige oma paigutus: Enne kodeerimise alustamist planeerige hoolikalt oma võrgustiku paigutus ja tehke kindlaks peamised alad ning nende soovitud suurused.
• Kasutage suhtelisi ühikuid: Eelistage reageerivate paigutuste loomiseks suhtelisi ühikuid nagu fr, em ja vw.
• Kasutage minmax(): Kasutage funktsiooni minmax(), et määratleda paindlikud veerusuurused, mis kohanduvad erineva sisu ja ekraanisuurustega.
• Kasutage repeat(): Kasutage funktsiooni repeat() korduvate veerumustrite lihtsustamiseks.
• Arvestage ligipääsetavusega: Veenduge, et teie paigutused on kõigile kasutajatele ligipääsetavad.
• Testige põhjalikult: Testige oma paigutusi erinevatel seadmetel ja brauserites, et veenduda nende ootuspärases toimimises.
• Kirjutage puhast ja hooldatavat koodi: Kasutage nimetatud võrgustikujooni ja kommentaare, et muuta oma kood loetavamaks ja hooldatavamaks.

Kokkuvõte

Atribuut grid-template-columns on võimas tööriist paindlike, reageerivate ja dünaamiliste veebipaigutuste loomiseks. Omandades erinevaid ühikuid, võtmesõnu ja funktsioone, saate avada CSS Grid'i täieliku potentsiaali ja luua vapustavaid veebidisaine, mis kohanduvad iga ekraanisuuruse ja sisu nõudega. Pidage meeles, et optimaalsete tulemuste saavutamiseks tuleb oma paigutusi hoolikalt planeerida, kasutada suhtelisi ühikuid, arvestada ligipääsetavusega ja põhjalikult testida. Neid parimaid praktikaid järgides saate luua kaasaegseid ja kasutajasõbralikke veebisaite, mis pakuvad suurepärast kogemust kõigile kasutajatele.

Lisamaterjalid

• MDN Web Docs: grid-template-columns
• CSS-Tricks: Täielik juhend CSS Grid'ile
• Grid by Example