Avastage CSS Grid'i 'track' funktsioonide, nagu fr, minmax() ja auto, vĂ”imsust, et luua dĂŒnaamilisi ja kohanduvaid paigutusi erinevatele ekraanisuurustele ja rahvusvahelisele sisule.
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;
}
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;
}
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 */
}
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
minjamaxvÀÀ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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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: Kasutageminmax(), 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.