CSS Grid'i radade suuruse määramine: sisemise ja välise kontrolli meisterlik valdamine

CSS Grid Layout on võimas tööriist keerukate ja reageerivate veebipaigutuste loomiseks. Üks selle peamisi tugevusi seisneb paindlikes radade suuruse määramise võimalustes, mis lubavad teil ridade ja veergude suurust täpselt kontrollida. Erinevate radade suuruse määramise märksõnade ja funktsioonide mõistmine on kohanduvate ja hooldatavate paigutuste ehitamisel ülioluline. See artikkel süveneb CSS Grid'i sisemise ja välise suuruse määramise täiustatud kontseptsioonidesse, uurides, kuidas need võimaldavad luua paigutusi, mis kohanduvad sujuvalt erineva sisu ja ekraanisuurustega.

Võrgustiku radade ja suuruse määramise mõistmine

Enne sisemise ja välise suuruse määramise spetsiifikasse sukeldumist kordame üle CSS Grid'i radade põhimõisted.

Mis on võrgustiku rajad?

Võrgustiku rajad on võrgustikupaigutuse read ja veerud. Need määratlevad struktuuri, millele võrgustiku elemendid paigutatakse. Nende radade suurus mõjutab otseselt üldist paigutust ja seda, kuidas sisu võrgustikus jaotatakse.

Radade suuruste määramine

Radade suurusi saate määratleda atribuutidega grid-template-rows ja grid-template-columns. Need atribuudid aktsepteerivad tühikutega eraldatud väärtuste loendit, kus iga väärtus tähistab vastava raja suurust. Näiteks:

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

            

              
                Copy
              
            
          

See kood loob kolme veeru ja kahe reaga võrgustiku. Esimene ja kolmas veerg võtavad kumbki 1 osa (fr) saadaolevast ruumist, samas kui teine veerg võtab 2 osa. Read suurustatakse automaatselt nende sisu põhjal.

Sisemine vs. väline suuruse määramine

Täiustatud võrgustiku radade suuruse määramise tuum seisneb sisemise ja välise suuruse määramise eristamise mõistmises. Need kontseptsioonid määravad, kuidas raja suurus määratakse selle sisu ja saadaoleva ruumi põhjal.

Sisemine suuruse määramine: sisust lähtuv

Sisemine suuruse määramine tähendab, et võrgustiku raja suurus määratakse sellele rajale paigutatud võrgustiku elementide sisu põhjal. Rada laieneb või tõmbub kokku, et sisu mahutada, teatud piirides. Sisemise suuruse määramise märksõnad on järgmised:

• auto: Vaikimisi väärtus. Raja suurus määratakse raja võrgustiku elementide suurima minimaalse suuruse panuse järgi. Enamasti tähendab see, et rada on piisavalt suur, et mahutada kogu sisu ilma ülevooluta, kuid seda võivad mõjutada võrgustiku elementidele määratud min-width/min-height väärtused.
• min-content: Rada suurustatakse nii, et see mahutaks vähima ruumi, mida sisu vajab ilma ülevooluta. Näiteks murtakse tekst võimalikult väikeses kohas, isegi kui see poolitab sõnu ebamugavalt.
• max-content: Rada suurustatakse nii, et see mahutaks suurima ruumi, mida sisu vajab ilma ülevooluta. Teksti puhul tähendab see, et see püüab vältida murdmist nii palju kui võimalik, mis võib potentsiaalselt tulemuseks anda väga laiad või kõrged rajad.
• fit-content(length): Rada suurustatakse vastavalt max-content ja määratud length väärtusest väiksemale. See võimaldab teil seada rajale maksimaalse suuruse, lastes sel samal ajal oma sisu põhjal kahaneda.

Näide: sisemine suuruse määramine min-content ja max-content abil

Kujutage ette stsenaariumit kahe veeruga. Esimese veeru suurus on määratud min-content ja teise oma max-content abil. Kui esimese veeru sisu on pikk sõna, murtakse see minimaalse sisu suuruse piires sobitumiseks igal võimalikul hetkel. Teine veerg aga laieneb, et mahutada sisu ilma murdmata.

            .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">Lühike tekst</div>
</div>

            

              
                Copy
              
            
          

Selles näites murtakse sõna "Supercalifragilisticexpialidocious" esimeses veerus mitmele reale, samas kui "Lühike tekst" jääb teises veerus ühele reale. See näitab, kuidas sisemine suuruse määramine kohandub sisu olemuslike suurusnõuetega.

Näide: sisemine suuruse määramine fit-content() abil

Funktsioon `fit-content()` on kasulik, kui soovite, et rada oleks sisu suurune, kuid omaks ka maksimaalse suuruse piirangut. Seda saab kasutada veergude või ridade liiga suureks muutumise vältimiseks, lubades neil samal ajal kahaneda, kui sisu on väiksem.

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

            

              
                Copy
              
            
          

Selles näites laieneb esimene veerg oma sisu mahutamiseks, kuid ei ületa 200px laiust. Teine veerg võtab ülejäänud ruumi. See on kasulik paigutuste loomisel, kus soovite, et veerg oleks paindlik, kuid ei võtaks liiga palju ruumi.

Väline suuruse määramine: ruumist lähtuv

Väline suuruse määramine seevastu tähendab, et võrgustiku raja suurus määratakse sisust väliste teguritega, näiteks võrgustiku konteineris saadaoleva ruumi või fikseeritud suurusväärtusega. Välise suuruse määramise märksõnad on järgmised:

• length: Fikseeritud pikkuse väärtus (nt 100px, 2em, 50vh). Rada on täpselt selle suurusega, olenemata sisust.
• percentage: Protsent võrgustiku konteineri suurusest (nt 50%). Rada võtab selle protsendi saadaolevast ruumist.
• fr (fraktsionaalne ühik): Esindab osa saadaolevast ruumist võrgustiku konteineris pärast kõigi teiste radade suuruse määramist. See on kõige paindlikum viis ruumi jaotamiseks radade vahel.

Näide: väline suuruse määramine fr ühikutega

fr ühik on hindamatu reageerivate paigutuste loomisel, mis kohanduvad erinevate ekraanisuurustega. Määrates radadele fraktsionaalseid ühikuid, tagate, et nad jagavad saadaolevat ruumi proportsionaalselt.

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

            

              
                Copy
              
            
          

Selles näites on võrgustiku konteineril kaks veergu. Esimene veerg võtab 1 osa saadaolevast ruumist, samas kui teine veerg võtab 2 osa. Kui võrgustiku konteiner on 600px lai, on esimene veerg 200px lai ja teine veerg 400px lai (millest on lahutatud võimalik võrgustiku vahe). See tagab, et veerud säilitavad alati oma proportsionaalse suhte, olenemata ekraani suurusest.

Näide: väline suuruse määramine protsentide ja fikseeritud pikkustega

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

            

              
                Copy
              
            
          

Selles näites on esimese veeru laiuseks seatud fikseeritud 200px. Teine veerg võtab 50% võrgustiku konteineri laiusest. Lõpuks kasutab kolmas veerg `1fr` ühikut, nii et see võtab kogu ruumi, mis jääb alles pärast kahe esimese veeru suuruse määramist.

Sisemise ja välise suuruse määramise kombineerimine: minmax()

Funktsioon minmax() võimaldab teil kombineerida sisemist ja välist suuruse määramist, pakkudes veelgi suuremat kontrolli radade suuruste üle. See määratleb raja jaoks vastuvõetavate suuruste vahemiku, täpsustades nii minimaalse kui ka maksimaalse väärtuse.

            minmax(min, max)
            

              
                Copy
              
            
          

• min: Raja minimaalne suurus. See võib olla mis tahes kehtiv raja suuruse määramise väärtus, sealhulgas sisemised märksõnad (auto, min-content, max-content) või välised väärtused (length, percentage, fr).
• max: Raja maksimaalne suurus. See võib samuti olla mis tahes kehtiv raja suuruse määramise väärtus. Kui `max` on väiksem kui `min`, siis `max` eiratakse ja kasutatakse `min` väärtust.

Näide: minmax() kasutamine reageerivate veergude jaoks

minmax() tavapärane kasutusjuhtum on reageerivate veergude loomine, millel on minimaalne laius, kuid mis saavad laieneda, et täita saadaolevat ruumi.

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

            

              
                Copy
              
            
          

Siin loob repeat(auto-fit, minmax(200px, 1fr)) nii palju veerge kui võimalik, mis on vähemalt 200px laiad, kuid saavad laieneda, et täita ülejäänud ruumi. Märksõna auto-fit tagab, et tühjad veerud ahendatakse, luues paindliku ja reageeriva paigutuse.

Näide: minmax() kombineerimine sisemise suuruse määramisega

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

            

              
                Copy
              
            
          

Selles näites on esimene veerg vähemalt sama lai kui selle minimaalne sisu suurus, kuid ei ületa 300px. Teine veerg võtab ülejäänud ruumi.

Praktilised rakendused ja parimad praktikad

Sisemise ja välise suuruse määramise mõistmine on vastupidavate ja kohanduvate paigutuste loomisel ülioluline. Siin on mõned praktilised rakendused ja parimad praktikad, mida meeles pidada:

• Reageeriv navigeerimine: Kasutage minmax(), et luua navigeerimismenüü elemente, millel on minimaalne laius, kuid mis saavad laieneda, et täita navigeerimisribal saadaolevat ruumi.
• Paindlikud kaardipaigutused: Kasutage repeat(auto-fit, minmax()), et luua kaardipaigutusi, mis kohanduvad automaatselt erinevate ekraanisuurustega, tagades, et kaardid murduvad väiksematel ekraanidel sujuvalt.
• Sisuteadlikud külgribad: Kasutage min-content või max-content, et suurustada külgribasid nende sisu põhjal, lubades neil vastavalt vajadusele laieneda või kokku tõmbuda.
• Vältige fikseeritud laiuseid: Minimeerige fikseeritud laiuste (px) kasutamist suhteliste ühikute (%, fr, em) kasuks, et luua paigutusi, mis kohanduvad erinevate ekraanisuuruste ja kasutajaeelistustega.
• Testige põhjalikult: Testige oma võrgustikupaigutusi alati erinevates seadmetes ja ekraanisuurustes, et tagada nende korrektne kuvamine ja ühtlane kasutajakogemus.

Täiustatud võrgustiku suuruse määramise tehnikad

Lisaks põhilistele märksõnadele ja funktsioonidele pakub CSS Grid täiustatumaid tehnikaid radade suuruste peenhäälestamiseks.

Funktsioon repeat()

Funktsioon repeat() lihtsustab mitme sama suurusega raja loomist. See võtab kaks argumenti: korduste arvu ja raja suuruse.

            repeat(arv, raja-suurus)
            

              
                Copy
              
            
          

Näiteks:

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

              
                Copy
              
            
          

See on samaväärne järgmisega:

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

              
                Copy
              
            
          

Funktsiooni repeat() saab kasutada ka märksõnadega auto-fit ja auto-fill, et luua reageerivaid võrgustikupaigutusi, mis kohanduvad automaatselt saadaoleva ruumiga.

Märksõnad auto-fit ja auto-fill

Neid märksõnu kasutatakse funktsiooniga repeat(), et luua reageerivaid võrgustikke, mis kohanduvad võrgustiku elementide arvu ja saadaoleva ruumiga. Peamine erinevus nende vahel seisneb selles, kuidas nad käsitlevad tühje radasid.

• auto-fit: Kui kõik rajad on tühjad, ahendatakse rajad 0 laiuseks.
• auto-fill: Kui kõik rajad on tühjad, säilitavad rajad oma suuruse.

Näide: auto-fit kasutamine reageerivate veergude jaoks

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

            

              
                Copy
              
            
          

Selles näites loob võrgustik nii palju veerge kui võimalik, mis on vähemalt 200px laiad, kuid saavad laieneda, et täita ülejäänud ruumi. Kui kõigi veergude täitmiseks ei ole piisavalt elemente, ahendatakse tühjad veerud 0 laiuseks.

Internatsionaliseerimise (i18n) ja lokaliseerimise (l10n) kaalutlused

Globaalsele vaatajaskonnale paigutuste kujundamisel on oluline arvestada erinevate keelte ja kirjaviiside suuna mõjuga. Teksti pikkus võib keelte vahel oluliselt erineda, mis võib potentsiaalselt mõjutada paigutust, kui radade suurused pole õigesti konfigureeritud. Siin on mõned näpunäited rahvusvahelistatud paigutuste kujundamiseks:

• Kasutage suhtelisi ühikuid: Eelistage suhtelisi ühikuid nagu em, rem ja protsendid fikseeritud ühikutele nagu pikslid, et tekst saaks skaleeruda vastavalt kasutaja fondi suuruse eelistustele.
• Sisemine suuruse määramine: Kasutage sisemise suuruse määramise märksõnu nagu min-content, max-content ja fit-content(), et tagada radade kohandumine sisu suurusega, olenemata keelest.
• Loogilised omadused: Kasutage loogilisi omadusi nagu inline-start ja inline-end füüsiliste omaduste nagu left ja right asemel, et toetada nii vasakult-paremale (LTR) kui ka paremalt-vasakule (RTL) keeli.
• Testimine: Testige oma paigutusi erinevate keelte ja kirjaviiside suundadega, et tuvastada ja lahendada võimalikud probleemid. Simuleerige pikemaid stringe, mida võib leida erinevates keeltes.

Kokkuvõte

CSS Grid'i radade suuruse määramine on võimas ja mitmekülgne tööriist reageerivate ja kohanduvate veebipaigutuste loomiseks. Valdades sisemise ja välise suuruse määramise kontseptsioone, mõistes funktsiooni minmax() ja kasutades funktsiooni repeat(), saate luua paigutusi, mis kohanduvad sujuvalt erineva sisu ja ekraanisuurustega. Ärge unustage globaalsele vaatajaskonnale kujundades arvestada internatsionaliseerimise ja lokaliseerimise mõjuga.

Eksperimenteerige erinevate radade suuruse määramise tehnikatega ja avastage CSS Grid'i lõputuid võimalusi. Praktika ja nende kontseptsioonide kindla mõistmisega olete hästi varustatud, et luua keerukaid ja kasutajasõbralikke veebipaigutusi mis tahes projekti jaoks.