CSS Grid'i 'Track' Funktsioonide Valdamine: Dünaamiline Paigutuse Suuruse Arvutamine Globaalseks Veebidisainiks

CSS Grid Layout on muutnud veebidisainile lähenemist, pakkudes enneolematut kontrolli ja paindlikkust keerukate ja reageerivate paigutuste loomisel. CSS Grid'i võimsuse keskmes on selle 'track' funktsioonid – fr, minmax() ja auto –, mis võimaldavad dünaamilist ja intelligentset suuruse arvutamist ruudustiku ridadele ja veergudele. Nende funktsioonide mõistmine ja tõhus kasutamine on oluline selliste paigutuste loomiseks, mis kohanduvad sujuvalt erinevate ekraanisuuruste, sisumahtude ja rahvusvahelistumise nõuetega.

CSS Grid'i 'Track'ide Mõistmine

Enne konkreetsetesse 'track' funktsioonidesse süvenemist määratleme, mis CSS Grid'i 'track' tegelikult on. Sisuliselt on 'track' kahe ruudustiku joone vaheline ala. See ala võib tähistada kas rida või veergu, olenevalt sellest, kas töötate grid-template-rows või grid-template-columns'iga. 'Track' funktsioonid määravad nende ridade ja veergude suuruse, defineerides, kuidas ruumi ruudustiku konteineris jaotatakse.

fr Ühik: Proportsionaalne Ruumi Jaotamine

fr ühik on CSS Grid'i dünaamiliste suuruse määramise võimekuse nurgakivi. See tähistab osa ruudustiku konteineris saadaolevast ruumist. Erinevalt fikseeritud ühikutest nagu pikslid või em-id, jaotab fr ühik ruumi proportsionaalselt 'track'ide vahel. See teeb selle ideaalseks paindlike paigutuste loomiseks, kus elementide suurus kohandub vaateakna või konteineri suurusega.

Kuidas fr Töötab

fr ühik arvutab vaba ruumi, lahutades fikseeritud suurusega 'track'ide poolt hõivatud ruumi ruudustiku konteineri kogusuurusest. Ülejäänud ruum jaotatakse seejärel proportsionaalselt vastavalt igale 'track'ile määratud fr väärtustele.

Näide: Lihtne Kolme Veeru Paigutus

Kujutame ette lihtsat kolme veeru paigutust, kus esimene veerg peaks võtma poole saadaolevast ruumist ja ülejäänud kaks veergu kumbki veerandi.

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

            

              
                Copy
              
            
          

Selles näites on esimesele veerule määratud 2fr ja teistele kahele kummalegi 1fr. Osade koguarv on 4 (2 + 1 + 1). Seega hõivab esimene veerg 50% (2/4) saadaolevast ruumist, samal ajal kui ülejäänud veerud hõivavad kumbki 25% (1/4).

Fikseeritud Suurusega 'Track'ide Haldamine fr'iga

Saate kombineerida fr ühikuid ka fikseeritud suurusega 'track'idega. Oletame, et soovite külgriba, mille fikseeritud laius on 200px, ja põhilist sisu ala, mis võtab ülejäänud ruumi.

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

            

              
                Copy
              
            
          

Siin on külgriba alati 200px lai ja põhiline sisu ala laieneb, et täita ülejäänud ruum. Kui ruudustiku konteiner on 800px lai, on põhiline sisu ala 600px lai (800px - 200px = 600px).

Rahvusvahelistumine ja fr

fr ühik on eriti kasulik rahvusvahelise sisu haldamisel, kus teksti pikkus võib erinevates keeltes oluliselt erineda. Kasutades fr, saate tagada, et teie paigutus kohandub pikemate või lühemate tekstijadadega, ilma et disain katki läheks. Näiteks kipuvad saksakeelsed sõnad olema palju pikemad kui nende ingliskeelsed vasted. Fikseeritud laiustega kujundatud paigutus võib inglise keeles hea välja näha, kuid saksa keeles olla täiesti katki. fr kasutamine aitab seda probleemi leevendada.

Näide: Paindlik Navigatsioonimenüü

Kujutage ette mitme elemendiga navigatsioonimenüüd. Soovite, et menüü täidaks kogu oma konteineri laiuse, jaotades ruumi võrdselt elementide vahel.

            .nav-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* or auto-fill */
 gap: 10px; /* optional gap */
}

            

              
                Copy
              
            
          

See tagab, et iga menüüelement võtab võrdse osa saadaolevast ruumist, olenemata selle tekstisildi pikkusest. minmax(100px, 1fr) tagab, et igal elemendil on minimaalne laius 100 pikslit, kuid see võib laieneda, et täita ülejäänud ruumi proportsionaalselt. `auto-fit` võtmesõna kohandab veergude arvu vastavalt konteineri suurusele ja sisule.

minmax() Funktsioon: Suuruspiirangute Määratlemine

Funktsioon minmax() võimaldab teil määratleda ruudustiku 'track'i minimaalse ja maksimaalse suuruse. See annab suurema kontrolli selle üle, kuidas 'track'id erinevates olukordades käituvad, takistades nende muutumist liiga väikeseks või liiga suureks. Süntaks on minmax(min, max), kus min on minimaalne suurus ja max on maksimaalne suurus.

minmax() Kasutusjuhud

• Sisu Ülevoolu Vältimine: Tagage, et veerg ei muutuks kunagi oma sisu laiusest kitsamaks, vältides teksti ülevoolu.
• Visuaalse Tasakaalu Hoidmine: Piirake veeru maksimaalset laiust, et vältida selle muutumist teiste veergudega võrreldes ebaproportsionaalselt suureks.
• Reageerivate Murdepunktide Loomine: Kohandage min ja max väärtusi vastavalt ekraani suurusele, et luua reageerivaid paigutusi.

Näide: Veeru Minimaalse Laiuse Tagamine

Oletame, et teil on veerg, mis sisaldab pilte. Soovite tagada, et veerg oleks alati piisavalt lai, et pilte mahutada, isegi väiksematel ekraanidel.

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

            

              
                Copy
              
            
          

Sel juhul ei ole esimene veerg kunagi kitsam kui 200px, olenemata ekraani suurusest. Kui vaba ruumi on vähem kui 200px, võtab veerg enda alla kogu ruudustiku konteineri laiuse, põhjustades teise veeru murdumise järgmisele reale (kui `grid-auto-flow` on seatud väärtusele `row`). Kui vaba ruumi on rohkem kui 200px, laieneb veerg, et täita proportsionaalselt vaba ruumi (kuni 1fr väärtusega määratletud maksimumini).

minmax() ja fr Kombineerimine

Saate kombineerida minmax() ja fr, et luua võimsaid ja paindlikke paigutusi. Kujutage ette stsenaariumi, kus soovite põhilist sisu ala ja külgriba. Külgribal peaks olema minimaalne laius 150px, kuid see võib laieneda, et võtta 1fr saadaolevast ruumist. Põhiline sisu ala peaks võtma ülejäänud ruumi.

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

            

              
                Copy
              
            
          

Selles näites ei ole külgriba kunagi kitsam kui 150px. Kui vaba ruum on piiratud, võtab külgriba 150px ja põhiline sisu ala võtab ülejäänud ruumi. Kui ruumi on piisavalt, võib külgriba laieneda, et võtta 1fr saadaolevast ruumist, samal ajal kui põhiline sisu ala võtab 2fr.

minmax() ja Ligipääsetavus

Kasutades minmax(), on oluline arvestada ligipääsetavusega. Veenduge, et teie minimaalsed suurused on piisavalt suured, et mahutada sisu erinevates keeltes ja erinevate fondisuurustega. Nägemispuudega kasutajad võivad fondi suurust suurendada, mis võib põhjustada sisu ülevoolu, kui minimaalne suurus on liiga väike. Oma paigutuste testimine erinevate fondisuuruste ja keeltega on hädavajalik.

Näide: Paindlik Pildigalerii

Looge paindlik pildigalerii, mis kohandub erinevate ekraanisuurustega. Igal pildil peaks olema minimaalne laius visuaalse selguse säilitamiseks, kuid galerii peaks laienema, et täita saadaolev ruum.

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

.gallery-item {
 width: 100%;
 height: auto;
}

.gallery-item img {
 width: 100%;
 height: auto;
 display: block;
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, 1fr)) loob veerud, mis on vähemalt 150px laiad ja laienevad, et täita saadaolev ruum. auto-fit võtmesõna tagab, et galerii kohandab dünaamiliselt veergude arvu vastavalt ekraani suurusele. Galeriielementide sees olevad pildid on seatud väärtusele width: 100%, et täita konteiner.

auto Võtmesõna: Sisemine Suuruse Määramine

auto võtmesõna annab ruudustikule käsu määrata 'track'i suurus selle sisu põhjal. See on eriti kasulik, kui soovite, et 'track' oleks võimalikult väike, kuid mahutaks siiski oma sisu ilma ülevooluta.

Kuidas auto Töötab

Kui kasutatakse auto, arvutab ruudustiku algoritm 'track'i sisu sisemise suuruse. See suurus määratakse sisu laiuse või kõrguse järgi, olenevalt sellest, kas tegemist on veeru või reaga. Seejärel kohandab 'track' oma suurust sisu mahutamiseks.

auto Kasutusjuhud

• Sisupõhine Suuruse Määramine: Laske veerul või real laieneda või kokku tõmbuda vastavalt selles sisalduva sisu hulgale.
• Paindlike Külgribade Loomine: Määrake külgriba suurus selle kõige laiema elemendi laiuse põhjal.
• Reageerivate Päiste ja Jaluste Rakendamine: Kohandage päise või jaluse kõrgust vastavalt selle sisu kõrgusele.

Näide: Veeru Suuruse Määramine Sisu Põhjal

Oletame, et teil on ruudustik külgriba ja põhilise sisu alaga. Külgriba peaks olema piisavalt lai, et mahutada oma kõige laiemat elementi, kuid mitte laiem. Põhiline sisu ala peaks võtma ülejäänud ruumi.

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

            

              
                Copy
              
            
          

Sel juhul kohandab külgriba automaatselt oma laiust vastavalt sisule. Kui külgriba kõige laiem element on 250px lai, on külgriba 250px lai. Põhiline sisu ala võtab seejärel ülejäänud ruumi.

auto Kombineerimine minmax()'iga

Saate kombineerida auto minmax()'iga, et määratleda minimaalne ja maksimaalne suurus 'track'ile, mis muidu määratakse automaatselt. Näiteks võite soovida, et veerg oleks vähemalt 100px lai, kuid laieneks automaatselt oma sisu põhjal kuni maksimaalse laiuseni 300px.

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

            

              
                Copy
              
            
          

Siin ei ole esimene veerg kunagi kitsam kui 100px. Kui veerus olev sisu nõuab rohkem ruumi, laieneb veerg kuni maksimaalselt 300px. Sellest edasi on veeru laius piiratud 300px'ga. Ülejäänud ruum antakse 1fr veerule.

auto ja Dünaamiline Sisu

auto võtmesõna on eriti kasulik dünaamilise sisuga tegelemisel, kus sisu maht võib oluliselt varieeruda. Näiteks e-kaubanduse veebisaidil võib tootenimede ja kirjelduste pikkus erineda. Kasutades auto, saate tagada, et teie paigutus kohandub nende variatsioonidega, ilma et disain katki läheks.

Näide: Dünaamiline Tooteloend

Looge dünaamiline tooteloend, kus iga tootekardi laius kohandub vastavalt tootenime pikkusele.

            .product-listing {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, auto));
 gap: 10px;
}

.product-card {
 border: 1px solid #ccc;
 padding: 10px;
}

.product-name {
 font-weight: bold;
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, auto)) loob veerud, mis on vähemalt 150px laiad ja laienevad automaatselt vastavalt tootenime pikkusele. auto-fit võtmesõna tagab, et loend kohandab dünaamiliselt veergude arvu vastavalt ekraani suurusele ja igas tootekardis olevale sisule.

'Track' Funktsioonide Kombineerimine Keerukamate Paigutuste Jaoks

CSS Grid'i 'track' funktsioonide tõeline jõud peitub nende võimes kombineerida, et luua keerukaid ja dünaamilisi paigutusi. Strateegiliselt kombineerides fr, minmax() ja auto, saate saavutada kontrolli ja paindlikkuse taseme, mis oli varem traditsiooniliste CSS-i paigutustehnikatega saavutamatu.

Näide: Reageeriv Töövaate Paigutus

Looge reageeriv töövaate paigutus fikseeritud laiusega külgriba, paindliku põhilise sisu ala ja parempoolse külgribaga, mis kohandub oma sisuga.

            .dashboard-container {
 display: grid;
 grid-template-columns: 200px 1fr auto;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
 "header header header"
 "sidebar main right"
 "footer footer footer";
 height: 100vh; /* or however you want to handle your layout height */
}

header {
 grid-area: header;
 background-color: #f0f0f0;
 padding: 20px;
}

sidebar {
 grid-area: sidebar;
 background-color: #e0e0e0;
 padding: 20px;
}

main {
 grid-area: main;
 padding: 20px;
}

right {
 grid-area: right;
 background-color: #d0d0d0;
 padding: 20px;
}

footer {
 grid-area: footer;
 background-color: #f0f0f0;
 padding: 20px;
}

            

              
                Copy
              
            
          

Selles näites on külgribal fikseeritud laius 200px, põhiline sisu ala võtab ülejäänud ruumi (1fr) ja parempoolne külgriba kohandub oma sisuga (auto). Päis ja jalus ulatuvad üle kogu töövaate laiuse. See paigutus on väga reageeriv ja kohandub hästi erinevate ekraanisuuruste ja sisuvariatsioonidega. grid-template-areas pakub nimetatud ruudustiku alasid, parandades loetavust ja hooldatavust.

Parimad Praktikad CSS Grid'i 'Track' Funktsioonide Kasutamiseks

• Planeerige Oma Paigutus: Enne koodi kirjutamist planeerige hoolikalt oma paigutus ja tehke kindlaks alad, mis peavad olema paindlikud ja need, mis peavad olema fikseeritud.
• Valige Õiged Ühikud: Valige sobivad ühikud (fr, px, em, auto) vastavalt iga 'track'i spetsiifilistele nõuetele.
• Kasutage minmax() Targalt: Kasutage minmax(), et määratleda suuruspiiranguid ja vältida sisu ülevoolu.
• Testige Põhjalikult: Testige oma paigutusi erinevatel ekraanisuurustel ja erinevate sisumahtudega, et tagada nende reageerivus ja ligipääsetavus.
• Arvestage Rahvusvahelistumisega: Arvestage oma paigutuste kujundamisel teksti pikkuse varieeruvusega erinevates keeltes.
• Eelistage Ligipääsetavust: Arvestage alati ligipääsetavusega, kui kasutate CSS Grid'i. Tagage, et teie paigutused oleksid puuetega inimestele kasutatavad.

Brauseriteülene Ühilduvus

CSS Grid'il on suurepärane brauseriteülene ühilduvus, mida toetavad kõik suuremad kaasaegsed brauserid. Siiski on alati hea mõte testida oma paigutusi erinevates brauserites, et tagada nende korrektne kuvamine. Vanemate brauserite jaoks võib olla vaja kasutada tootja prefikseid (nt -ms- Internet Exploreri jaoks), kuid see muutub üha haruldasemaks.

Kokkuvõte

CSS Grid'i 'track' funktsioonid pakuvad võimsat ja paindlikku viisi dünaamiliste ja reageerivate veebipaigutuste loomiseks. Valdades fr ühikut, minmax() funktsiooni ja auto võtmesõna, saate luua paigutusi, mis kohanduvad sujuvalt erinevate ekraanisuuruste, sisumahtude ja rahvusvahelistumise nõuetega. Võtke need tehnikad omaks ja avage CSS Grid'i täielik potentsiaal oma veebidisaini projektide jaoks. Ärge unustage oma paigutusi põhjalikult testida ja arvestada ligipääsetavusega kogu arendusprotsessi vältel, et luua tõeliselt kaasavaid ja kasutajasõbralikke kogemusi globaalsele publikule.