CSS Grid takelių funkcijos: dinamiško maketo dydžio nustatymo įvaldymas

CSS Grid yra galinga maketo sistema, leidžianti interneto kūrėjams lengvai kurti sudėtingus ir reaguojančius dizainus. CSS Grid lankstumo pagrindas yra jo takelių funkcijos. Šios funkcijos, įskaitant fr, minmax(), auto ir fit-content(), suteikia mechanizmus, leidžiančius dinamiškai apibrėžti tinklelio takelių (eilučių ir stulpelių) dydį. Norint įvaldyti CSS Grid ir kurti maketus, kurie sklandžiai prisitaiko prie skirtingų ekrano dydžių ir turinio variantų, būtina suprasti šias funkcijas.

Tinklelio takelių supratimas

Prieš pasinerdami į konkrečias takelių funkcijas, būtina suprasti, kas yra tinklelio takeliai. Tinklelio takelis yra tarpas tarp bet kurių dviejų tinklelio linijų. Stulpeliai yra vertikalūs takeliai, o eilutės yra horizontalūs takeliai. Šių takelių dydis nustato, kaip turinys paskirstomas tinklelyje.

`fr` vienetas: dalinė erdvė

fr vienetas atspindi dalį laisvos vietos tinklelio konteineryje. Tai galinga priemonė kuriant lanksčius maketus, kuriuose stulpeliai arba eilutės proporcingai dalijasi likusią erdvę. Pagalvokite apie tai kaip apie būdą padalinti laisvą vietą, kai visi kiti fiksuoto dydžio takeliai buvo įvertinti.

Kaip veikia `fr`

Kai apibrėžiate tinklelio takelio dydį naudodami fr, naršyklė apskaičiuoja laisvą vietą atimdama bet kokių fiksuoto dydžio takelių (pvz., pikselių, em) dydį iš bendro tinklelio konteinerio dydžio. Tada likusi erdvė padalijama tarp fr vienetų pagal jų santykius.

Pavyzdys: vienodo dydžio stulpeliai

Norėdami sukurti tris vienodo pločio stulpelius, galite naudoti šį CSS:

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

Šis kodas padalija laisvą vietą po lygiai tarp trijų stulpelių. Jei tinklelio konteineris yra 600 pikselių pločio, kiekvienas stulpelis bus 200 pikselių pločio (darant prielaidą, kad nėra tarpų ar rėmelių).

Pavyzdys: proporcingi stulpeliai

Norėdami sukurti stulpelius su skirtingomis proporcijomis, galite naudoti skirtingas fr reikšmes:

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

Šiame pavyzdyje pirmasis stulpelis užims dvigubai daugiau vietos nei kiti du stulpeliai. Jei tinklelio konteineris yra 600 pikselių pločio, pirmasis stulpelis bus 300 pikselių pločio, o kiti du stulpeliai bus po 150 pikselių pločio.

Praktinis naudojimo atvejis: reaguojantis šoninės juostos maketas

fr vienetas ypač naudingas kuriant reaguojančius šoninės juostos maketus. Apsvarstykite maketą su fiksuoto pločio šonine juosta ir lanksčia pagrindinio turinio sritimi:

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

.sidebar {
  /* Šoninės juostos stiliai */
}

.main-content {
  /* Pagrindinio turinio stiliai */
}

Šioje sąrankoje šoninė juosta visada bus 200 pikselių pločio, o pagrindinio turinio sritis išsiplės, kad užpildytų likusią erdvę. Šis maketas automatiškai prisitaiko prie skirtingų ekrano dydžių, užtikrindamas, kad turinys visada būtų rodomas optimaliai.

`minmax()` funkcija: lankstūs dydžio apribojimai

minmax() funkcija apibrėžia priimtinų tinklelio takelio dydžių diapazoną. Ji priima du argumentus: minimalų dydį ir maksimalų dydį.

minmax(min, max)

Tinklelio takelis visada bus bent minimalaus dydžio, tačiau jis gali padidėti iki maksimalaus dydžio, jei yra laisvos vietos. Ši funkcija yra neįkainojama kuriant reaguojančius maketus, kurie prisitaiko prie skirtingo turinio ilgio ir ekrano dydžių.

Pavyzdys: stulpelio pločio ribojimas

Norėdami užtikrinti, kad stulpelis niekada netaptų per siauras ar per platus, galite naudoti minmax():

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

Šiame pavyzdyje pirmasis stulpelis bus bent 200 pikselių pločio, tačiau jis gali išaugti, kad užpildytų laisvą vietą iki likusios vietos dalies, apibrėžtos 1fr. Tai apsaugo stulpelį nuo per siauro tapimo mažuose ekranuose arba per plataus dideliuose ekranuose. Antrasis stulpelis užima likusią erdvę kaip dalį.

Pavyzdys: turinio perpildymo prevencija

minmax() taip pat gali būti naudojamas norint neleisti turiniui perpildyti savo konteinerį. Apsvarstykite scenarijų, kai turite stulpelį, kuriame turėtų tilpti kintamas teksto kiekis:

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

Čia vidurinis stulpelis bus bent 150 pikselių pločio. Jei turiniui reikia daugiau vietos, stulpelis išsiplės, kad jį sutalpintų. Raktinis žodis auto kaip didžiausia reikšmė nurodo takeliui nustatyti savo dydį pagal turinį viduje, užtikrinant, kad turinys niekada neperpildytų. Du stulpeliai šone išlieka fiksuoto 100 pikselių pločio.

Praktinis naudojimo atvejis: reaguojanti nuotraukų galerija

Apsvarstykite galimybę sukurti nuotraukų galeriją, kurioje norite rodyti nuotraukas eilutėje, bet norite užtikrinti, kad jos netaptų per mažos mažuose ekranuose arba per didelės dideliuose ekranuose:

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

.grid-item {
  /* Nuotraukų stiliai */
}

`repeat(auto-fit, minmax(150px, 1fr))` yra galingas derinys. `auto-fit` automatiškai reguliuoja stulpelių skaičių pagal laisvą vietą. `minmax(150px, 1fr)` užtikrina, kad kiekviena nuotrauka būtų bent 150 pikselių pločio ir galėtų išaugti, kad užpildytų laisvą vietą. Tai sukuria reaguojančią nuotraukų galeriją, kuri prisitaiko prie skirtingų ekrano dydžių, užtikrindama nuoseklią peržiūros patirtį. Apsvarstykite galimybę pridėti `object-fit: cover;` prie `.grid-item` CSS, kad užtikrintumėte, jog nuotraukos teisingai užpildytų erdvę be iškraipymų.

`auto` raktinis žodis: dydžio nustatymas pagal turinį

Raktinis žodis auto nurodo tinkleliui nustatyti takelio dydį pagal jame esantį turinį. Takelis išsiplės, kad atitiktų turinį, bet nesumažės mažesnis už minimalų turinio dydį.

Kaip veikia `auto`

Kai naudojate auto, tinklelio takelio dydį lemia vidinis jame esančio turinio dydis. Tai ypač naudinga scenarijams, kai turinio dydis yra nenuspėjamas arba kintamas.

Pavyzdys: lankstus stulpelis tekstui

Apsvarstykite maketą, kuriame turite stulpelį, kuriame reikia sutalpinti kintamą teksto kiekį:

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

Šiame pavyzdyje pirmasis stulpelis yra fiksuotas 200 pikselių pločio. Antrasis stulpelis nustatytas į auto, todėl jis išsiplės, kad atitiktų jame esantį tekstinį turinį. Trečiasis stulpelis naudoja likusią erdvę kaip dalį ir yra lankstus.

Pavyzdys: eilutės su kintamu aukščiu

Taip pat galite naudoti auto eilutėms. Tai naudinga, kai turite eilučių su turiniu, kurio aukštis gali skirtis:

.grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
}

Šiuo atveju kiekviena eilutė automatiškai pakoreguos savo aukštį, kad atitiktų jame esantį turinį. Tai naudinga kuriant maketus su dinamišku turiniu, pavyzdžiui, tinklaraščio įrašus ar straipsnius su skirtingu teksto ir nuotraukų kiekiu.

Praktinis naudojimo atvejis: reaguojantis naršymo meniu

Galite naudoti auto norėdami sukurti reaguojantį naršymo meniu, kuriame kiekvieno meniu elemento plotis reguliuojamas pagal jo turinį:

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

.menu-item {
  /* Meniu elemento stiliai */
}

Naudojant `repeat(auto-fit, auto)` bus sukurta tiek stulpelių, kiek reikia meniu elementams sutalpinti, o kiekvieno elemento plotis bus nustatytas pagal jo turinį. Raktinis žodis `auto-fit` užtikrina, kad elementai persikels į kitą eilutę mažuose ekranuose. Taip pat nepamirškite stilizuoti `menu-item`, kad jis būtų tinkamai rodomas ir atrodytų estetiškai.

`fit-content()` funkcija: turinio dydžio nustatymo ribojimas

fit-content() funkcija suteikia būdą apriboti tinklelio takelio dydį pagal jo turinį. Ji priima vieną argumentą: maksimalų dydį, kurį takelis gali užimti. Takelis išsiplės, kad atitiktų turinį, bet niekada neviršys nurodyto maksimalaus dydžio.

fit-content(max-size)

Kaip veikia `fit-content()`

fit-content() funkcija apskaičiuoja tinklelio takelio dydį pagal jame esantį turinį. Tačiau ji užtikrina, kad takelio dydis niekada neviršytų maksimalaus dydžio, nurodyto funkcijos argumente.

Pavyzdys: stulpelio išplėtimo ribojimas

Apsvarstykite maketą, kuriame norite, kad stulpelis išsiplėstų, kad atitiktų jo turinį, bet nenorite, kad jis taptų per platus:

.grid-container {
  display: grid;
  grid-template-columns: 100px fit-content(300px) 1fr;
}

Šiame pavyzdyje antrasis stulpelis išsiplės, kad atitiktų jo turinį, bet niekada neviršys 300 pikselių pločio. Jei turiniui reikia daugiau nei 300 pikselių, stulpelis bus apkarpytas ties 300 pikselių (nebent nustatėte `overflow: visible` tinklelio elementui). Pirmasis stulpelis išlieka fiksuoto pločio, o paskutinis stulpelis gauna likusią erdvę kaip dalį.

Pavyzdys: eilutės aukščio valdymas

Taip pat galite naudoti fit-content() eilutėms, kad valdytumėte jų aukštį:

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

Čia pirmoji eilutė išsiplės, kad atitiktų jo turinį, bet niekada neviršys 200 pikselių aukščio. Antroji eilutė užims likusią erdvę kaip visos laisvos vietos dalį.

Praktinis naudojimo atvejis: reaguojantis kortelių maketas

fit-content() naudingas kuriant reaguojančius kortelių maketus, kuriuose norite, kad kortelės išsiplėstų, kad atitiktų jų turinį, bet norite apriboti jų plotį:

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

.card {
  /* Kortelės stiliai */
}

Šis kodas sukuria reaguojantį kortelių maketą, kuriame kiekviena kortelė yra bent 200 pikselių pločio ir gali išsiplėsti, kad atitiktų jo turinį, iki maksimalaus 300 pikselių pločio. `repeat(auto-fit, ...)` užtikrina, kad kortelės persikels į kitą eilutę mažuose ekranuose. Funkcijoje repeat, naudojant `minmax` kartu su `fit-content`, suteikia dar didesnį valdymo lygį - užtikrinant, kad elementai visada turės minimalų 200 pikselių plotį, bet taip pat niekada nebus platesni nei 300 pikselių (darant prielaidą, kad turinys viduje neviršija šios vertės). Ši strategija ypač vertinga, jei norite, kad išvaizda būtų nuosekli skirtinguose ekranuose. Nepamirškite stilizuoti klasę `.card` su tinkamu užpildu, paraštėmis ir kitomis vizualinėmis savybėmis, kad pasiektumėte norimą išvaizdą.

Takelių funkcijų derinimas pažangiems maketams

Tikroji CSS Grid takelių funkcijų galia slypi derinant jas kuriant sudėtingus ir dinamiškus maketus. Strategiškai naudojant fr, minmax(), auto ir fit-content(), galite pasiekti platų reaguojančių ir lanksčių dizainų spektrą.

Pavyzdys: mišrūs vienetai ir funkcijos

Apsvarstykite maketą su fiksuoto pločio šonine juosta, lanksčia pagrindinio turinio sritimi ir stulpeliu, kuris išsiplečia, kad atitiktų jo turinį, bet turi maksimalų plotį:

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

Šiame pavyzdyje pirmasis stulpelis yra fiksuotas ties 200 pikselių. Antrasis stulpelis užima likusią vietą naudodamas 1fr. Trečiasis stulpelis išsiplečia, kad atitiktų jo turinį, bet yra apribotas iki maksimalaus 400 pikselių pločio naudojant fit-content(400px).

Pavyzdys: sudėtingas reaguojantis dizainas

Sukurkime sudėtingesnį svetainės maketo su antrašte, šonine juosta, pagrindiniu turiniu ir porašte pavyzdį:

.grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

header {
  grid-area: header;
  /* Antraštės stiliai */
}

.sidebar {
  grid-area: sidebar;
  /* Šoninės juostos stiliai */
}

main {
  grid-area: main;
  /* Pagrindinio turinio stiliai */
}

footer {
  grid-area: footer;
  /* Poraštės stiliai */
}

Šiame makete:

grid-template-columns apibrėžia du stulpelius: šoninę juostą, kurios minimalus plotis yra 150 pikselių, o didžiausias plotis - 250 pikselių, ir pagrindinio turinio sritį, kuri užima likusią vietą naudodama 1fr.
grid-template-rows apibrėžia tris eilutes: antraštę ir poraštę, kurios automatiškai reguliuoja savo aukštį, kad atitiktų jų turinį (auto), ir pagrindinio turinio sritį, kuri užima likusią vertikalią vietą naudodama 1fr.
grid-template-areas savybė apibrėžia maketo struktūrą naudodama pavadintas tinklelio sritis.

Šis pavyzdys parodo, kaip sujungti takelių funkcijas ir tinklelio sritis, kad sukurtumėte lanksčią ir reaguojančią svetainės maketą. Nepamirškite pridėti atitinkamą stilių kiekvienai sekcijai (antraštei, šoninei juostai, pagrindiniam turiniui, poraštei), kad užtikrintumėte tinkamą vizualinį pateikimą.

Geriausia CSS Grid takelių funkcijų naudojimo praktika

Norėdami maksimaliai išnaudoti CSS Grid takelių funkcijas, apsvarstykite šias geriausias praktikas:

Suteikite pirmenybę turiniui: nustatydami takelių dydžius, visada teikite pirmenybę turiniui. Maketas turėtų prisitaikyti prie turinio, o ne atvirkščiai.
Naudokite minmax(), kad užtikrintumėte reaguojamumą: naudokite minmax(), kad apibrėžtumėte priimtinų tinklelio takelių dydžių diapazoną, užtikrinant, kad jie prisitaikytų prie skirtingų ekrano dydžių ir turinio variantų.
Strategiškai derinkite funkcijas: derinkite takelių funkcijas, kad sukurtumėte sudėtingus ir dinamiškus maketus. Pavyzdžiui, naudokite minmax() ir fr kartu, kad sukurtumėte lanksčius stulpelius, kurie turi minimalaus ir maksimalaus pločio apribojimus.
Išbandykite skirtinguose įrenginiuose: visada išbandykite savo maketus skirtinguose įrenginiuose ir ekranuose, kad įsitikintumėte, jog jie yra reaguojantys ir vizualiai patrauklūs.
Atsižvelkite į pritaikomumą: užtikrinkite, kad jūsų maketai būtų prieinami visiems naudotojams, įskaitant neįgaliuosius. Naudokite semantinį HTML ir pateikite alternatyvų tekstą nuotraukoms.
Naudokite tinklelio tikrinimo įrankius: dauguma šiuolaikinių naršyklių turi įtaisytus tinklelio tikrinimo įrankius, kurie gali padėti vizualizuoti ir derinti tinklelio maketus. Šie įrankiai gali būti neįkainojami norint suprasti, kaip takelių funkcijos veikia jūsų maketą.

Pasauliniai CSS Grid aspektai

Kuriant svetaines pasaulinei auditorijai, svarbu atsižvelgti į kultūrinius skirtumus ir regioninius variantus. Štai keletas aspektų, susijusių su CSS Grid:

Maketo kryptis (direction savybė): direction savybė gali būti naudojama norint pakeisti tinklelio maketo kryptį. Pavyzdžiui, kalbomis iš dešinės į kairę (RTL), tokiomis kaip arabų ir hebrajų, galite nustatyti direction: rtl;, kad pakeistumėte maketo kryptį. CSS Grid automatiškai prisitaiko prie maketo krypties, užtikrindamas, kad maketas būtų rodomas teisingai skirtingomis kalbomis.
Loginės savybės (inset-inline-start, inset-inline-end ir kt.): vietoj fizinių savybių, tokių kaip left ir right, naudokite logines savybes, tokias kaip inset-inline-start ir inset-inline-end. Šios savybės automatiškai prisitaiko prie maketo krypties, užtikrindamos, kad maketas būtų nuoseklus tiek LTR, tiek RTL kalbomis.
Šriftų dydžiai: atkreipkite dėmesį į šriftų dydžius, naudojamus tinklelio elementuose. Skirtingoms kalboms gali reikėti skirtingų šriftų dydžių, kad būtų užtikrintas optimalus skaitomumas. Apsvarstykite galimybę naudoti santykinius vienetus, tokius kaip em arba rem, kad šriftų dydžiai galėtų būti keičiami pagal naudotojo nuostatas.
Datos ir skaičių formatai: jei jūsų tinklelio makete yra datų ar skaičių, būtinai suformatuokite juos teisingai pagal naudotojo lokalę. Naudokite JavaScript arba serverio pusės biblioteką, kad suformatuotumėte datas ir skaičius pagal naudotojo kalbos ir regiono nustatymus.
Nuotraukos ir piktogramos: atminkite, kad kai kurios nuotraukos ir piktogramos skirtingose kultūrose gali turėti skirtingas reikšmes arba konotacijas. Venkite naudoti nuotraukas ar piktogramas, kurios galėtų būti įžeidžiančios arba kultūriškai nejautrios. Pavyzdžiui, rankos gestas, kuris vienoje kultūroje laikomas teigiamu, kitoje kultūroje gali būti laikomas įžeidžiančiu.
Vertimas ir lokalizavimas: jei jūsų svetainė pasiekiama keliomis kalbomis, būtinai išverskite visą tekstą tinklelio makete, įskaitant antraštes, etiketes ir turinį. Apsvarstykite galimybę naudoti vertimo valdymo sistemą, kad supaprastintumėte vertimo procesą ir užtikrintumėte nuoseklumą skirtingomis kalbomis.

Išvada

CSS Grid takelių funkcijos yra esminės priemonės kuriant dinamiškus ir reaguojančius maketus, kurie prisitaiko prie skirtingų ekrano dydžių ir turinio variantų. Įvaldę fr, minmax(), auto ir fit-content(), galite kurti sudėtingus ir lanksčius maketus, kurie užtikrina nuoseklią ir įtraukiantį naudotojo patirtį visuose įrenginiuose ir platformose. Nepamirškite teikti pirmenybę turiniui, naudoti minmax(), kad užtikrintumėte reaguojamumą, strategiškai derinti funkcijas ir išbandyti skirtinguose įrenginiuose, kad įsitikintumėte, jog jūsų maketai yra vizualiai patrauklūs ir prieinami visiems naudotojams. Atsižvelgdami į pasaulinius kalbos ir kultūros aspektus, galite sukurti svetaines, kurios būtų prieinamos ir patrauklios pasaulinei auditorijai.

Praktikuodami ir eksperimentuodami galite išnaudoti visą CSS Grid takelių funkcijų galią ir sukurti nuostabius bei reaguojančius maketus, kurie pagerins jūsų interneto kūrimo įgūdžius ir suteiks geresnę naudotojo patirtį jūsų auditorijai.