CSS Grid Template Columns: Obvladovanje dinamičnega definiranja stolpcev

CSS Grid je revolucioniral spletno postavitev, saj ponuja nadzor in prilagodljivost brez primere. Ena njegovih ključnih lastnosti je lastnost grid-template-columns, ki vam omogoča definiranje strukture stolpcev vaše mreže. Učinkovita uporaba te lastnosti je ključnega pomena za ustvarjanje odzivnih in dinamičnih postavitev, ki se prilagajajo različnim velikostim zaslona in vsebinskim zahtevam.

Razumevanje lastnosti grid-template-columns

Lastnost grid-template-columns določa število in širino stolpcev v mrežnem vsebniku. Velikosti stolpcev lahko določite z različnimi enotami, vključno z:

• Fiksne dolžine: Piksli (px), točke (pt), centimetri (cm), milimetri (mm), palci (in)
• Relativne dolžine: Ems (em), rems (rem), širina vidnega polja (vw), višina vidnega polja (vh)
• Frakcijska enota: fr (predstavlja del razpoložljivega prostora v mrežnem vsebniku)
• Ključne besede: auto, min-content, max-content, minmax()

Začnimo z osnovnim primerom:

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

            

              
                Copy
              
            
          

Ta koda ustvari mrežo s tremi stolpci. Prvi in tretji stolpec zasedata vsak 1/4 razpoložljivega prostora, medtem ko drugi stolpec zaseda 2/4 (ali 1/2) prostora.

Fiksne proti relativnim enotam

Izbira med fiksnimi in relativnimi enotami je odvisna od vaših oblikovalskih ciljev. Fiksne enote, kot so piksli, zagotavljajo natančen nadzor nad širinami stolpcev, vendar lahko postavitve naredijo manj prilagodljive in odzivne. Relativne enote po drugi strani omogočajo, da se stolpci sorazmerno spreminjajo z velikostjo zaslona ali vsebino.

Fiksne enote (piksli): Piksle uporabite, kadar želite, da ima element določeno, nespremenljivo velikost. To je manj pogosto za stolpce v odzivni mrežni postavitvi, vendar je lahko uporabno za elemente s specifičnimi zahtevami blagovne znamke. Primer:

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

            

              
                Copy
              
            
          

Relativne enote (Ems, Rems, enote vidnega polja): Te enote so bolj prilagodljive. em in rem sta relativna na velikosti pisav, kar omogoča, da se elementi prilagajajo velikosti besedila za boljšo dostopnost. vw in vh sta relativna na velikost vidnega polja, kar omogoča postavitve, ki se prilagajajo različnim dimenzijam zaslona. Primer:

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

            

              
                Copy
              
            
          

Frakcijska enota (fr)

Enota fr je močno orodje za ustvarjanje prilagodljivih mrežnih postavitev. Predstavlja delež razpoložljivega prostora v mrežnem vsebniku po tem, ko so upoštevani vsi drugi stolpci s fiksno velikostjo. Zaradi tega je idealna za sorazmerno porazdelitev preostalega prostora.

Razmislite o tem primeru:

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

            

              
                Copy
              
            
          

Tukaj je prvi stolpec širok 100 pikslov. Preostali prostor se nato razdeli med drugi in tretji stolpec, pri čemer drugi stolpec zavzame 1/3 preostalega prostora, tretji pa 2/3.

Ključne besede: auto, min-content, max-content

CSS Grid ponuja več ključnih besed za določanje širin stolpcev:

• auto: Brskalnik samodejno izračuna širino stolpca na podlagi njegove vsebine.
• min-content: Širina stolpca je nastavljena na najmanjšo možno velikost, potrebno za vsebovanje njegove vsebine brez prelivanja. To lahko pomeni prelom dolgih besed.
• max-content: Širina stolpca je nastavljena na največjo možno velikost, potrebno za vsebovanje njegove vsebine brez preloma. To bo, če je mogoče, preprečilo prelom besed v nove vrstice.

Primer z uporabo auto:

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

            

              
                Copy
              
            
          

V tem primeru bosta prvi in tretji stolpec prilagodila svojo širino, da se prilegata vsebini, medtem ko bo drugi stolpec zavzel preostali prostor.

Primer z uporabo min-content in max-content:

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

            

              
                Copy
              
            
          

Prvi stolpec bo širok le toliko, kolikor narekuje njegov najmanjši del vsebine, medtem ko se bo drugi stolpec razširil, da bo vsa njegova vsebina, če je mogoče, v eni vrstici.

Funkcija minmax()

Funkcija minmax() vam omogoča določitev najmanjše in največje velikosti za stolpec. To je še posebej uporabno za ustvarjanje stolpcev, ki se lahko razširijo, da zapolnijo razpoložljiv prostor, vendar se ne skrčijo pod določeno velikost.

Sintaksa:

            minmax(min, max)

            

              
                Copy
              
            
          

Primer:

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

            

              
                Copy
              
            
          

V tem primeru sta prvi in tretji stolpec fiksna na 100 pikslov. Drugi stolpec ima najmanjšo širino 200 pikslov in največjo širino, ki mu omogoča, da se razširi in zapolni preostali prostor. Če je preostalega prostora manj kot 200px, bo drugi stolpec širok 200px, mreža pa se lahko prelije ali pa se stolpci sorazmerno skrčijo (odvisno od splošnih omejitev mreže).

Ponavljanje definicij stolpcev s repeat()

Funkcija repeat() poenostavi definiranje ponavljajočih se vzorcev stolpcev. Sprejme dva argumenta: število ponovitev vzorca in sam vzorec.

Sintaksa:

            repeat(number, pattern)

            

              
                Copy
              
            
          

Primer:

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

            

              
                Copy
              
            
          

Ta koda je enakovredna:

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

            

              
                Copy
              
            
          

repeat() lahko kombinirate tudi z drugimi enotami in ključnimi besedami:

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

            

              
                Copy
              
            
          

To ustvari mrežo z naslednjo strukturo stolpcev: 100px, 1fr, 200px, 1fr, 200px, auto.

Uporaba auto-fill in auto-fit z repeat()

Ključni besedi auto-fill in auto-fit, uporabljeni z repeat(), ustvarita dinamične stolpce, ki se samodejno prilagajajo razpoložljivemu prostoru. Posebej sta uporabni za ustvarjanje odzivnih galerij ali seznamov.

• auto-fill: Ustvari čim več stolpcev, ne da bi prelil vsebnik, tudi če so nekateri stolpci prazni.
• auto-fit: Podobno kot auto-fill, vendar strne prazne stolpce na širino 0, kar omogoča drugim stolpcem, da se razširijo in zapolnijo razpoložljiv prostor.

Primer z uporabo auto-fill:

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

            

              
                Copy
              
            
          

To ustvari čim več stolpcev, vsak z najmanjšo širino 200 pikslov in največjo širino, ki jim omogoča, da zapolnijo razpoložljiv prostor. Če ni dovolj vsebine za zapolnitev vseh stolpcev, bodo nekateri stolpci prazni, vendar bodo še vedno zasedali prostor.

Primer z uporabo auto-fit:

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

            

              
                Copy
              
            
          

To deluje podobno kot auto-fill, vendar če so stolpci prazni, se bodo strnili na širino 0, preostali stolpci pa se bodo razširili, da zapolnijo prostor. To je pogosto želeno obnašanje pri odzivnih mrežah.

Poimenovane mrežne črte

Mrežnim črtam lahko dodelite imena, kar lahko naredi vašo kodo bolj berljivo in lažjo za vzdrževanje. To storite tako, da imena obdate z oglatimi oklepaji pri definiranju lastnosti grid-template-columns (in grid-template-rows).

Primer:

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

            

              
                Copy
              
            
          

V tem primeru smo poimenovali prvo mrežno črto col-start, drugo col-2 in tretjo col-end. Ta imena lahko nato uporabite pri postavljanju mrežnih elementov z lastnostmi grid-column-start, grid-column-end, grid-row-start in grid-row-end.

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

            

              
                Copy
              
            
          

To postavi mrežni element tako, da se začne pri črti col-start in konča pri črti col-2.

Praktični primeri in primeri uporabe

Tukaj je nekaj praktičnih primerov, kako uporabiti grid-template-columns v resničnih scenarijih:

1. Odzivna navigacijska vrstica

Navigacijska vrstica, ki se prilagaja različnim velikostim zaslona:

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

.logo {
  /* Stili za logotip */
}

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

.search-bar {
  /* Stili za iskalno vrstico */
}

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

            

              
                Copy
              
            
          

V tem primeru ima navigacijska vrstica tri stolpce: enega za logotip (auto), enega za navigacijske povezave (1fr) in enega za iskalno vrstico (auto). Na manjših zaslonih se mreža strne v en sam stolpec, navigacijske povezave pa se zložijo navpično.

2. Galerija slik

Odzivna galerija slik s prilagodljivim številom stolpcev:

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

.gallery-item {
  /* Stili za elemente galerije */
}

            

              
                Copy
              
            
          

To ustvari galerijo slik s stolpci, ki so široki vsaj 250 pikslov in se razširijo, da zapolnijo razpoložljiv prostor. Ključna beseda auto-fit zagotavlja, da se prazni stolpci strnejo, slike pa lepo zapolnijo vsebnik.

3. Dvostolpčna postavitev s stransko vrstico

Klasična dvostolpčna postavitev s stransko vrstico fiksne širine in prilagodljivim glavnim vsebinskim območjem:

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

.sidebar {
  /* Stili za stransko vrstico */
}

.main-content {
  /* Stili za glavno vsebino */
}

            

              
                Copy
              
            
          

Stranska vrstica ima fiksno širino 250 pikslov, medtem ko glavno vsebinsko območje zavzame preostali prostor.

4. Kompleksne postavitve z poimenovanimi mrežnimi območji

Za bolj zapletene postavitve lahko kombinirate grid-template-columns z grid-template-areas, da določite specifična območja vaše mreže.

            .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;
  /* Stili za glavo */
}

.sidebar {
  grid-area: sidebar;
  /* Stili za stransko vrstico */
}

.main {
  grid-area: main;
  /* Stili za glavno vsebino */
}

.footer {
  grid-area: footer;
  /* Stili za nogo */
}

            

              
                Copy
              
            
          

Ta primer definira mrežo z glavo, stransko vrstico, glavnim vsebinskim območjem in nogo. Lastnost grid-template-areas dodeli specifična območja tem elementom. Definicije stolpcev uporabljajo poimenovane mrežne črte za izboljšanje berljivosti.

Premisleki o dostopnosti

Pri uporabi CSS Grida je ključno upoštevati dostopnost. Zagotovite, da so vaše postavitve logične in navigabilne za uporabnike s posebnimi potrebami. Uporabljajte semantične elemente HTML in zagotovite ustrezne atribute ARIA za izboljšanje dostopnosti. Bodite na primer pozorni na vrstni red tabulatorja in zagotovite, da je vsebina predstavljena v logičnem vrstnem redu, tudi če je vizualno preurejena z Gridom.

Optimizacija zmogljivosti

CSS Grid je na splošno zmogljiv, vendar obstaja nekaj stvari, ki jih lahko storite za optimizacijo delovanja:

• Izogibajte se pretiranemu gnezdenju: Ohranjajte svoje mrežne strukture čim bolj enostavne, da zmanjšate obremenitev pri upodabljanju.
• Uporabite strojno pospeševanje: Izkoristite lastnosti CSS, ki sprožijo strojno pospeševanje (npr. transform: translateZ(0)), da izboljšate zmogljivost upodabljanja.
• Optimizirajte slike: Zagotovite, da so vaše slike pravilno optimizirane, da zmanjšate čas nalaganja strani.
• Testirajte na različnih napravah: Temeljito preizkusite svoje postavitve na različnih napravah in brskalnikih, da prepoznate in odpravite morebitne težave z zmogljivostjo.

Odpravljanje napak v postavitvah CSS Grid

Sodobni brskalniki ponujajo odlična razvijalska orodja za odpravljanje napak v postavitvah CSS Grid. V Chromu, Firefoxu in Edgu lahko pregledate mrežni vsebnik in vizualizirate mrežne črte, širine stolpcev in višine vrstic. Ta orodja vam lahko pomagajo hitro prepoznati in rešiti težave s postavitvijo.

Najboljše prakse za uporabo grid-template-columns

• Načrtujte svojo postavitev: Preden začnete s kodiranjem, skrbno načrtujte svojo mrežno postavitev in določite ključna območja ter njihove želene velikosti.
• Uporabljajte relativne enote: Za ustvarjanje odzivnih postavitev raje uporabljajte relativne enote, kot so fr, em in vw.
• Uporabite minmax(): Uporabite funkcijo minmax() za določanje prilagodljivih velikosti stolpcev, ki se prilagajajo različnim vsebinam in velikostim zaslona.
• Uporabite repeat(): Uporabite funkcijo repeat() za poenostavitev ponavljajočih se vzorcev stolpcev.
• Upoštevajte dostopnost: Zagotovite, da so vaše postavitve dostopne vsem uporabnikom.
• Temeljito testirajte: Preizkusite svoje postavitve na različnih napravah in brskalnikih, da zagotovite, da delujejo po pričakovanjih.
• Pišite čisto, vzdržljivo kodo: Uporabljajte poimenovane mrežne črte in komentarje, da bo vaša koda bolj berljiva in lažja za vzdrževanje.

Zaključek

Lastnost grid-template-columns je močno orodje za ustvarjanje prilagodljivih, odzivnih in dinamičnih spletnih postavitev. Z obvladovanjem različnih enot, ključnih besed in funkcij, ki so na voljo, lahko odklenete polni potencial CSS Grida in ustvarite osupljive spletne dizajne, ki se prilagajajo kateri koli velikosti zaslona in vsebinskim zahtevam. Ne pozabite skrbno načrtovati svojih postavitev, uporabljati relativne enote, upoštevati dostopnost in temeljito testirati, da zagotovite optimalne rezultate. Z upoštevanjem teh najboljših praks lahko ustvarite sodobne, uporabniku prijazne spletne strani, ki vsem uporabnikom zagotavljajo odlično izkušnjo.

Dodatni viri

• MDN spletna dokumentacija: grid-template-columns
• CSS-Tricks: Popoln vodnik po CSS Gridu
• Grid by Example