Določanje velikosti sledi v CSS Grid: Obvladovanje notranjega in zunanjega nadzora

CSS Grid Layout je zmogljivo orodje za ustvarjanje kompleksnih in odzivnih spletnih postavitev. Ena od njegovih ključnih prednosti so prilagodljive zmožnosti določanja velikosti sledi, ki vam omogočajo natančen nadzor nad velikostjo vrstic in stolpcev. Razumevanje različnih ključnih besed in funkcij za določanje velikosti sledi je ključno za gradnjo prilagodljivih in vzdržljivih postavitev. Ta članek se poglablja v napredne koncepte notranjega in zunanjega določanja velikosti v CSS Grid ter raziskuje, kako vam omogočajo ustvarjanje postavitev, ki se elegantno prilagajajo različnim vsebinam in velikostim zaslonov.

Razumevanje mrežnih sledi in določanja velikosti

Preden se poglobimo v podrobnosti notranjega in zunanjega določanja velikosti, ponovimo temeljne koncepte mrežnih sledi v CSS Grid.

Kaj so mrežne sledi?

Mrežne sledi so vrstice in stolpci mrežne postavitve. Določajo strukturo, na katero so postavljeni elementi mreže. Velikost teh sledi neposredno vpliva na celotno postavitev in na to, kako je vsebina porazdeljena znotraj mreže.

Določanje velikosti sledi

Velikosti sledi lahko določite z lastnostma grid-template-rows in grid-template-columns. Te lastnosti sprejmejo seznam vrednosti, ločenih s presledki, kjer vsaka vrednost predstavlja velikost ustrezne sledi. Na primer:

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

            

              
                Copy
              
            
          

Ta koda ustvari mrežo s tremi stolpci in dvema vrsticama. Prvi in tretji stolpec zavzameta po 1 delež (fr) razpoložljivega prostora, medtem ko drugi stolpec zavzame 2 deleža. Velikost vrstic se samodejno določi glede na njihovo vsebino.

Notranje proti zunanjemu določanju velikosti

Jedro naprednega določanja velikosti mrežnih sledi leži v razumevanju razlike med notranjim in zunanjim določanjem velikosti. Ti koncepti določajo, kako se velikost sledi določi na podlagi njene vsebine in razpoložljivega prostora.

Notranje določanje velikosti: Odvisno od vsebine

Notranje določanje velikosti pomeni, da je velikost mrežne sledi določena z vsebino znotraj elementov mreže, ki so postavljeni v to sled. Sled se bo razširila ali skrčila, da bo ustrezala vsebini, do določenih meja. Ključne besede za notranje določanje velikosti vključujejo:

• auto: Privzeta vrednost. Velikost sledi je določena z največjim prispevkom minimalne velikosti elementov mreže v sledi. V večini primerov to učinkovito pomeni, da bo sled dovolj velika, da se prilega vsa vsebina brez prelivanja, vendar nanjo lahko vplivajo vrednosti min-width/min-height, nastavljene na elementih mreže.
• min-content: Sled je dimenzionirana tako, da ustreza najmanjši količini prostora, ki jo vsebina potrebuje, ne da bi se prelila. Na primer, besedilo se bo prelomilo na najmanjši možni točki, tudi če to nerodno prelomi besede.
• max-content: Sled je dimenzionirana tako, da ustreza največji količini prostora, ki jo vsebina potrebuje, ne da bi se prelila. Za besedilo to pomeni, da se bo poskušalo čim bolj izogniti prelomu, kar lahko povzroči zelo široke ali visoke sledi.
• fit-content(length): Sled je dimenzionirana na manjšo od vrednosti max-content in določene dolžine. To vam omogoča, da nastavite največjo velikost za sled, hkrati pa ji dovolite, da se skrči glede na svojo vsebino.

Primer: Notranje določanje velikosti z min-content in max-content

Predstavljajte si scenarij z dvema stolpcema. Velikost prvega stolpca je določena z min-content, drugega pa z max-content. Če je vsebina v prvem stolpcu dolga beseda, se bo prelomila na kateri koli možni točki, da se prilega minimalni velikosti vsebine. Drugi stolpec pa se bo razširil, da bo vsebina ustrezala brez preloma.

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

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Kratko besedilo</div>
</div>

            

              
                Copy
              
            
          

V tem primeru bo beseda "Supercalifragilisticexpialidocious" prelomljena v več vrstic v prvem stolpcu, medtem ko bo "Kratko besedilo" ostalo v eni vrstici v drugem stolpcu. To prikazuje, kako se notranje določanje velikosti prilagaja lastnim zahtevam velikosti vsebine.

Primer: Notranje določanje velikosti s fit-content()

Funkcija `fit-content()` je uporabna, kadar želite, da je sled dimenzionirana glede na vsebino, vendar ima tudi omejitev največje velikosti. To lahko uporabite za preprečevanje, da bi stolpci ali vrstice postali preveliki, hkrati pa jim omogočite, da se skrčijo, če je vsebina manjša.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

V tem primeru se bo prvi stolpec razširil, da se prilega svoji vsebini, vendar ne bo presegel širine 200px. Drugi stolpec bo zavzel preostali prostor. To je uporabno za ustvarjanje postavitev, kjer želite, da je stolpec prilagodljiv, vendar ne zavzame preveč prostora.

Zunanje določanje velikosti: Odvisno od prostora

Zunanje določanje velikosti pa pomeni, da je velikost mrežne sledi določena z dejavniki zunaj vsebine, kot so razpoložljiv prostor v vsebniku mreže ali fiksna vrednost velikosti. Ključne besede za zunanje določanje velikosti vključujejo:

• length: Fiksna vrednost dolžine (npr. 100px, 2em, 50vh). Sled bo natančno te velikosti, ne glede na vsebino.
• percentage: Odstotek velikosti vsebnika mreže (npr. 50%). Sled bo zavzela ta odstotek razpoložljivega prostora.
• fr (frakcijska enota): Predstavlja delež razpoložljivega prostora v vsebniku mreže, potem ko so bile vse druge sledi dimenzionirane. To je najbolj prilagodljiv način za porazdelitev prostora med sledmi.

Primer: Zunanje določanje velikosti z enotami fr

Enota fr je neprecenljiva za ustvarjanje odzivnih postavitev, ki se prilagajajo različnim velikostim zaslonov. Z dodeljevanjem frakcijskih enot sledem zagotovite, da si sorazmerno delijo razpoložljiv prostor.

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

            

              
                Copy
              
            
          

V tem primeru ima vsebnik mreže dva stolpca. Prvi stolpec zavzame 1 delež razpoložljivega prostora, drugi stolpec pa 2 deleža. Če je vsebnik mreže širok 600px, bo prvi stolpec širok 200px, drugi pa 400px (brez upoštevanja razmika med mrežo). To zagotavlja, da stolpci vedno ohranjajo svoje sorazmerno razmerje, ne glede na velikost zaslona.

Primer: Zunanje določanje velikosti z odstotki in fiksnimi dolžinami

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

V tem primeru je prvi stolpec nastavljen na fiksno širino `200px`. Drugi stolpec bo zavzel 50% širine vsebnika mreže. Končno, tretji stolpec uporablja enoto `1fr`, tako da bo zavzel ves preostali prostor, potem ko sta bila prva dva stolpca dimenzionirana.

Kombiniranje notranjega in zunanjega določanja velikosti: minmax()

Funkcija minmax() vam omogoča kombiniranje notranjega in zunanjega določanja velikosti, kar zagotavlja še večji nadzor nad velikostmi sledi. Določa obseg sprejemljivih velikosti za sled, pri čemer določa tako minimalno kot maksimalno vrednost.

            minmax(min, max)
            

              
                Copy
              
            
          

• min: Minimalna velikost sledi. To je lahko katera koli veljavna vrednost za določanje velikosti sledi, vključno z notranjimi ključnimi besedami (auto, min-content, max-content) ali zunanjimi vrednostmi (length, percentage, fr).
• max: Maksimalna velikost sledi. To je lahko tudi katera koli veljavna vrednost za določanje velikosti sledi. Če je `max` manjši od `min`, se `max` prezre in uporabi se `min`.

Primer: Uporaba minmax() za odzivne stolpce

Pogost primer uporabe funkcije minmax() je ustvarjanje odzivnih stolpcev, ki imajo minimalno širino, vendar se lahko razširijo, da zapolnijo razpoložljiv prostor.

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

            

              
                Copy
              
            
          

Tukaj repeat(auto-fit, minmax(200px, 1fr)) ustvari čim več stolpcev, ki so široki vsaj 200px, vendar se lahko razširijo, da zapolnijo preostali prostor. Ključna beseda auto-fit zagotavlja, da se prazni stolpci strnejo, kar ustvari prilagodljivo in odzivno postavitev.

Primer: Kombiniranje minmax() z notranjim določanjem velikosti

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

V tem primeru bo prvi stolpec vsaj tako širok kot njegova minimalna velikost vsebine, vendar ne bo presegel `300px`. Drugi stolpec bo zavzel preostali prostor.

Praktične uporabe in najboljše prakse

Razumevanje notranjega in zunanjega določanja velikosti je ključno za ustvarjanje robustnih in prilagodljivih postavitev. Tu je nekaj praktičnih uporab in najboljših praks, ki jih je treba upoštevati:

• Odzivna navigacija: Uporabite minmax() za ustvarjanje navigacijskih elementov, ki imajo minimalno širino, vendar se lahko razširijo, da zapolnijo razpoložljiv prostor v navigacijski vrstici.
• Prilagodljive postavitve s karticami: Uporabite repeat(auto-fit, minmax()) za ustvarjanje postavitev s karticami, ki se samodejno prilagajajo različnim velikostim zaslonov, kar zagotavlja, da se kartice elegantno prelomijo na manjših zaslonih.
• Stranske vrstice, ki se zavedajo vsebine: Uporabite min-content ali max-content za določanje velikosti stranskih vrstic glede na njihovo vsebino, kar jim omogoča, da se po potrebi razširijo ali skrčijo.
• Izogibajte se fiksnim širinam: Zmanjšajte uporabo fiksnih širin (px) v korist relativnih enot (%, fr, em), da ustvarite postavitve, ki se prilagajajo različnim velikostim zaslonov in uporabniškim preferencam.
• Temeljito testiranje: Vedno preizkusite svoje mrežne postavitve na različnih napravah in velikostih zaslonov, da zagotovite, da se pravilno prikažejo in zagotavljajo dosledno uporabniško izkušnjo.

Napredne tehnike določanja velikosti mreže

Poleg osnovnih ključnih besed in funkcij CSS Grid ponuja naprednejše tehnike za natančno prilagajanje velikosti sledi.

Funkcija repeat()

Funkcija repeat() poenostavi ustvarjanje več sledi enake velikosti. Sprejme dva argumenta: število ponovitev in velikost sledi.

            repeat(number, track-size)
            

              
                Copy
              
            
          

Na primer:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

To je enakovredno:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

Funkcijo repeat() lahko uporabite tudi s ključnima besedama auto-fit in auto-fill za ustvarjanje odzivnih mrežnih postavitev, ki se samodejno prilagajajo razpoložljivemu prostoru.

Ključni besedi auto-fit in auto-fill

Ti ključni besedi se uporabljata s funkcijo repeat() za ustvarjanje odzivnih mrež, ki se prilagajajo številu elementov v mreži in razpoložljivemu prostoru. Ključna razlika med njima je v tem, kako obravnavata prazne sledi.

• auto-fit: Če so vse sledi prazne, se bodo sledi strnile na širino 0.
• auto-fill: Če so vse sledi prazne, bodo sledi ohranile svojo velikost.

Primer: Uporaba auto-fit za odzivne stolpce

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

            

              
                Copy
              
            
          

V tem primeru bo mreža ustvarila čim več stolpcev, ki so široki vsaj 200px, vendar se lahko razširijo, da zapolnijo preostali prostor. Če ni dovolj elementov za zapolnitev vseh stolpcev, se bodo prazni stolpci strnili na širino 0.

Upoštevanje internacionalizacije (i18n) in lokalizacije (l10n)

Pri oblikovanju postavitev za globalno občinstvo je pomembno upoštevati vpliv različnih jezikov in smeri pisanja. Dolžina besedila se lahko med jeziki znatno razlikuje, kar lahko vpliva na postavitev, če velikosti sledi niso pravilno nastavljene. Tu je nekaj nasvetov za oblikovanje internacionaliziranih postavitev:

• Uporabite relativne enote: Dajte prednost relativnim enotam, kot so em, rem in odstotki, pred fiksnimi enotami, kot so piksli, da se besedilo lahko prilagaja glede na uporabnikove preference velikosti pisave.
• Notranje določanje velikosti: Uporabite ključne besede za notranje določanje velikosti, kot so min-content, max-content in fit-content(), da zagotovite, da se sledi prilagajajo velikosti vsebine, ne glede na jezik.
• Logične lastnosti: Uporabite logične lastnosti, kot sta inline-start in inline-end, namesto fizičnih lastnosti, kot sta left in right, za podporo jezikom, ki se pišejo od leve proti desni (LTR) in od desne proti levi (RTL).
• Testiranje: Preizkusite svoje postavitve z različnimi jeziki in smermi pisanja, da odkrijete in odpravite morebitne težave. Simulirajte daljše nize, ki jih lahko najdemo v različnih jezikih.

Zaključek

Določanje velikosti sledi v CSS Grid je zmogljivo in vsestransko orodje za ustvarjanje odzivnih in prilagodljivih spletnih postavitev. Z obvladovanjem konceptov notranjega in zunanjega določanja velikosti, razumevanjem funkcije minmax() in uporabo funkcije repeat() lahko gradite postavitve, ki se elegantno prilagajajo različnim vsebinam in velikostim zaslonov. Ne pozabite upoštevati vpliva internacionalizacije in lokalizacije pri oblikovanju za globalno občinstvo.

Eksperimentirajte z različnimi tehnikami določanja velikosti sledi in raziščite neskončne možnosti CSS Grid. Z vajo in trdnim razumevanjem teh konceptov boste dobro opremljeni za ustvarjanje sofisticiranih in uporabniku prijaznih spletnih postavitev za kateri koli projekt.