2025 m. rugpjūčio 29 d.Lietuvių

Atskleiskite CSS tinklelio takelių dydžio nustatymo galią su vidiniais ir išoriniais raktažodžiais. Išmokite kurti lanksčius, prisitaikančius maketus įvairiam turiniui ir ekranų dydžiams.

CSS Tinklelio Takelių Dydžio Nustatymas: Vidinės ir Išorinės Kontrolės Įvaldymas

CSS Tinklelio Išdėstymas (angl. Grid Layout) yra galingas įrankis kuriant sudėtingus ir prisitaikančius tinklalapių maketus. Viena iš pagrindinių jo stiprybių yra lanksčios takelių dydžio nustatymo galimybės, leidžiančios tiksliai valdyti eilučių ir stulpelių dydį. Norint kurti adaptyvius ir lengvai prižiūrimus maketus, labai svarbu suprasti skirtingus takelių dydžio nustatymo raktažodžius ir funkcijas. Šiame straipsnyje gilinamasi į pažangias vidinio ir išorinio dydžio nustatymo koncepcijas CSS Tinklelyje, tyrinėjant, kaip jos leidžia kurti maketus, kurie grakščiai prisitaiko prie įvairaus turinio ir ekrano dydžių.

Tinklelio Takelių ir Dydžio Nustatymo Supratimas

Prieš gilinantis į vidinio ir išorinio dydžio nustatymo specifiką, trumpai apžvelkime pagrindines CSS Tinklelio takelių sąvokas.

Kas yra Tinklelio Takeliai?

Tinklelio takeliai – tai tinklelio išdėstymo eilutės ir stulpeliai. Jie apibrėžia struktūrą, kurioje dedami tinklelio elementai. Šių takelių dydis tiesiogiai veikia bendrą maketą ir tai, kaip turinys paskirstomas tinklelyje.

Takelių Dydžių Nurodymas

Takelių dydžius galite nustatyti naudodami grid-template-rows ir grid-template-columns savybes. Šios savybės priima tarpu atskirtų verčių sąrašą, kur kiekviena vertė atitinka atitinkamo takelio dydį. Pavyzdžiui:

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

Šis kodas sukuria tinklelį su trimis stulpeliais ir dviem eilutėmis. Pirmas ir trečias stulpeliai užima po 1 dalį (fr) laisvos vietos, o antrasis stulpelis užima 2 dalis. Eilučių dydis nustatomas automatiškai pagal jų turinį.

Vidinis ir Išorinis Dydžio Nustatymas

Pažangaus tinklelio takelių dydžio nustatymo esmė slypi supratime apie skirtumą tarp vidinio ir išorinio dydžio nustatymo. Šios koncepcijos lemia, kaip takelio dydis nustatomas atsižvelgiant į jo turinį ir turimą erdvę.

Vidinis Dydžio Nustatymas: Valdomas Turinio

Vidinis dydžio nustatymas reiškia, kad tinklelio takelio dydis priklauso nuo tinklelio elementų turinio, esančio tame takelyje. Takelis išsiplės arba susitrauks, kad tilptų turinys, neviršydamas tam tikrų ribų. Vidinio dydžio nustatymo raktažodžiai apima:

auto: Numatytoji reikšmė. Takelio dydis nustatomas pagal didžiausią minimalų tinklelio elementų dydį takelyje. Daugeliu atvejų tai reiškia, kad takelis bus pakankamai didelis, kad tilptų visas turinys be išlipimo iš rėmų, tačiau jį gali paveikti tinklelio elementams nustatytos min-width/min-height reikšmės.
min-content: Takelio dydis nustatomas taip, kad jis užimtų mažiausią įmanomą plotą, kurio reikia turiniui be išlipimo. Pavyzdžiui, tekstas bus keliamas į kitą eilutę mažiausiame įmanomame taške, net jei tai nepatogiai laužo žodžius.
max-content: Takelio dydis nustatomas taip, kad jis užimtų didžiausią įmanomą plotą, kurio reikia turiniui be išlipimo. Tekstui tai reiškia, kad jis stengsis vengti kėlimo į kitą eilutę, kiek įmanoma, o tai gali lemti labai plačius ar aukštus takelius.
fit-content(length): Takelio dydis nustatomas pagal mažesnę iš max-content ir nurodytos length (ilgio) reikšmės. Tai leidžia nustatyti maksimalų takelio dydį, tuo pačiu leidžiant jam susitraukti priklausomai nuo turinio.

Pavyzdys: Vidinis dydžio nustatymas su min-content ir max-content

Panagrinėkime scenarijų su dviem stulpeliais. Pirmo stulpelio dydis nustatytas su min-content, o antro – su max-content. Jei pirmo stulpelio turinys yra ilgas žodis, jis bus padalintas bet kuriame įmanomame taške, kad tilptų į minimalaus turinio dydį. Antrasis stulpelis, priešingai, išsiplės, kad tilptų turinys be kėlimo į kitą eilutę.

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

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

Šiame pavyzdyje žodis „Supercalifragilisticexpialidocious“ bus padalintas į kelias eilutes pirmame stulpelyje, o „Short text“ (Trumpas tekstas) liks vienoje eilutėje antrame stulpelyje. Tai parodo, kaip vidinis dydžio nustatymas prisitaiko prie turinio prigimtinių dydžio reikalavimų.

Pavyzdys: Vidinis dydžio nustatymas su fit-content()

fit-content() funkcija yra naudinga, kai norite, kad takelio dydis priklausytų nuo turinio, bet taip pat turėtų maksimalaus dydžio ribą. Tai galima naudoti norint išvengti per didelių stulpelių ar eilučių, tuo pačiu leidžiant jiems susitraukti, jei turinys yra mažesnis.

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

Šiame pavyzdyje pirmas stulpelis išsiplės, kad tilptų jo turinys, bet neviršys 200px pločio. Antras stulpelis užims likusią erdvę. Tai naudinga kuriant maketus, kur norite, kad stulpelis būtų lankstus, bet neužimtų per daug vietos.

Išorinis Dydžio Nustatymas: Valdomas Erdvės

Kita vertus, išorinis dydžio nustatymas reiškia, kad tinklelio takelio dydis nustatomas pagal veiksnius, nepriklausančius nuo turinio, pavyzdžiui, pagal turimą erdvę tinklelio konteineryje ar nustatytą fiksuotą dydžio reikšmę. Išorinio dydžio nustatymo raktažodžiai apima:

length: Fiksuota ilgio reikšmė (pvz., 100px, 2em, 50vh). Takelis bus tiksliai tokio dydžio, nepriklausomai nuo turinio.
percentage: Procentinė tinklelio konteinerio dydžio dalis (pvz., 50%). Takelis užims šią procentinę dalį turimos erdvės.
fr (dalinis vienetas): Atspindi dalį laisvos vietos tinklelio konteineryje, likusios po to, kai buvo nustatyti visų kitų takelių dydžiai. Tai lanksčiausias būdas paskirstyti erdvę tarp takelių.

Pavyzdys: Išorinis dydžio nustatymas su fr vienetais

fr vienetas yra neįkainojamas kuriant prisitaikančius maketus, kurie prisitaiko prie skirtingų ekranų dydžių. Priskirdami dalinius vienetus takeliams, užtikrinate, kad jie proporcingai pasidalins turima erdve.

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

Šiame pavyzdyje tinklelio konteineris turi du stulpelius. Pirmas stulpelis užima 1 dalį laisvos vietos, o antrasis – 2 dalis. Jei tinklelio konteineris yra 600px pločio, pirmas stulpelis bus 200px pločio, o antras – 400px pločio (atėmus tinklelio tarpą). Tai užtikrina, kad stulpeliai visada išlaikys savo proporcinį santykį, nepriklausomai nuo ekrano dydžio.

Pavyzdys: Išorinis dydžio nustatymas su procentais ir fiksuotais ilgiais

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

Šiame pavyzdyje pirmo stulpelio plotis nustatytas fiksuotas – `200px`. Antras stulpelis užims 50% tinklelio konteinerio pločio. Galiausiai, trečias stulpelis naudoja `1fr` vienetą, todėl jis užims visą likusią erdvę po to, kai bus nustatyti pirmųjų dviejų stulpelių dydžiai.

Vidinio ir Išorinio Dydžio Nustatymo Derinimas: `minmax()`

minmax() funkcija leidžia derinti vidinį ir išorinį dydžio nustatymą, suteikdama dar didesnę takelių dydžių kontrolę. Ji apibrėžia priimtinų takelio dydžių diapazoną, nurodydama minimalią ir maksimalią reikšmes.

            minmax(min, max)

min: Minimalus takelio dydis. Tai gali būti bet kokia galiojanti takelio dydžio reikšmė, įskaitant vidinius raktažodžius (auto, min-content, max-content) ar išorines reikšmes (length, percentage, fr).
max: Maksimalus takelio dydis. Tai taip pat gali būti bet kokia galiojanti takelio dydžio reikšmė. Jei `max` yra mažesnis už `min`, tada `max` ignoruojamas ir naudojamas `min`.

Pavyzdys: minmax() naudojimas prisitaikantiems stulpeliams

Dažnas minmax() panaudojimo atvejis – kurti prisitaikančius stulpelius, kurie turi minimalų plotį, bet gali išsiplėsti, kad užpildytų turimą erdvę.

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

Čia repeat(auto-fit, minmax(200px, 1fr)) sukuria tiek stulpelių, kiek įmanoma, kurie yra bent 200px pločio, bet gali išsiplėsti, kad užpildytų likusią erdvę. auto-fit raktažodis užtikrina, kad tušti stulpeliai susitrauks, sukuriant lankstų ir prisitaikantį maketą.

Pavyzdys: minmax() derinimas su vidiniu dydžio nustatymu

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

Šiame pavyzdyje pirmas stulpelis bus bent jau tokio pločio, kaip jo minimalus turinio dydis, bet neviršys `300px`. Antrasis stulpelis užims likusią erdvę.

Praktinis Taikymas ir Gerosios Praktikos

Vidinio ir išorinio dydžio nustatymo supratimas yra labai svarbus kuriant tvirtus ir adaptyvius maketus. Štai keletas praktinių taikymo pavyzdžių ir gerųjų praktikų, kurias verta prisiminti:

Prisitaikanti Navigacija: Naudokite minmax(), kad sukurtumėte navigacijos elementus, kurie turi minimalų plotį, bet gali išsiplėsti, kad užpildytų turimą erdvę navigacijos juostoje.
Lankstūs Kortelių Maketai: Taikykite repeat(auto-fit, minmax()), kad sukurtumėte kortelių maketus, kurie automatiškai prisitaiko prie skirtingų ekranų dydžių, užtikrinant, kad kortelės grakščiai persikeltų mažesniuose ekranuose.
Prie Turinio Prisitaikančios Šoninės Juostos: Naudokite min-content arba max-content, kad nustatytumėte šoninių juostų dydį pagal jų turinį, leidžiant joms išsiplėsti ar susitraukti pagal poreikį.
Venkite Fiksuotų Pločių: Sumažinkite fiksuotų pločių (px) naudojimą ir pirmenybę teikite santykiniams vienetams (%, fr, em), kad sukurtumėte maketus, kurie prisitaiko prie skirtingų ekranų dydžių ir vartotojo nuostatų.
Kruopščiai Testuokite: Visada testuokite savo tinklelio maketus įvairiuose įrenginiuose ir ekranų dydžiuose, kad užtikrintumėte, jog jie atvaizduojami teisingai ir suteikia nuoseklią vartotojo patirtį.

Pažangios Tinklelio Dydžio Nustatymo Technikos

Be pagrindinių raktažodžių ir funkcijų, CSS Tinklelis siūlo ir pažangesnių technikų takelių dydžiams tikslinti.

`repeat()` Funkcija

repeat() funkcija supaprastina kelių vienodo dydžio takelių kūrimą. Ji priima du argumentus: pasikartojimų skaičių ir takelio dydį.

            repeat(number, track-size)

Pavyzdžiui:

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

Tai yra ekvivalentu:

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

repeat() funkcija taip pat gali būti naudojama su auto-fit ir auto-fill raktažodžiais, norint sukurti prisitaikančius tinklelio maketus, kurie automatiškai prisitaiko prie turimos erdvės.

`auto-fit` ir `auto-fill` Raktažodžiai

Šie raktažodžiai naudojami su repeat() funkcija, siekiant sukurti prisitaikančius tinklelius, kurie prisitaiko prie elementų skaičiaus tinklelyje ir turimos erdvės. Pagrindinis skirtumas tarp jų yra tai, kaip jie elgiasi su tuščiais takeliais.

auto-fit: Jei visi takeliai yra tušti, jie susitrauks iki 0 pločio.
auto-fill: Jei visi takeliai yra tušti, jie išlaikys savo dydį.

Pavyzdys: auto-fit naudojimas prisitaikantiems stulpeliams

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

Šiame pavyzdyje tinklelis sukurs tiek stulpelių, kiek įmanoma, kurie yra bent 200px pločio, bet gali išsiplėsti, kad užpildytų likusią erdvę. Jei nėra pakankamai elementų, kad užpildytų visus stulpelius, tušti stulpeliai susitrauks iki 0 pločio.

Svarstymai Dėl Internacionalizacijos (i18n) ir Lokalizacijos (l10n)

Kuriant maketus pasaulinei auditorijai, svarbu atsižvelgti į skirtingų kalbų ir rašymo krypčių poveikį. Teksto ilgis gali labai skirtis tarp kalbų, o tai gali paveikti maketą, jei takelių dydžiai nėra tinkamai sukonfigūruoti. Štai keletas patarimų, kaip kurti internacionalizuotus maketus:

Naudokite Santykinius Vienetus: Pirmenybę teikite santykiniams vienetams, tokiems kaip em, rem ir procentai, o ne fiksuotiems vienetams, tokiems kaip pikseliai, kad tekstas galėtų keisti mastelį pagal vartotojo šrifto dydžio nuostatas.
Vidinis Dydžio Nustatymas: Naudokite vidinio dydžio nustatymo raktažodžius, tokius kaip min-content, max-content ir fit-content(), kad užtikrintumėte, jog takeliai prisitaiko prie turinio dydžio, nepriklausomai nuo kalbos.
Loginės Savybės: Naudokite logines savybes, tokias kaip inline-start ir inline-end, vietoj fizinių savybių, tokių kaip left ir right, kad palaikytumėte tiek iš kairės į dešinę (LTR), tiek iš dešinės į kairę (RTL) rašomas kalbas.
Testavimas: Testuokite savo maketus su skirtingomis kalbomis ir rašymo kryptimis, kad nustatytumėte ir išspręstumėte galimas problemas. Simuliuokite ilgesnes eilutes, kurios gali pasitaikyti kitose kalbose.

Išvados

CSS Tinklelio takelių dydžio nustatymas yra galingas ir universalus įrankis kuriant prisitaikančius ir adaptyvius tinklalapių maketus. Įvaldę vidinio ir išorinio dydžio nustatymo koncepcijas, suprasdami minmax() funkciją ir pasinaudodami repeat() funkcijos galimybėmis, galite kurti maketus, kurie grakščiai prisitaiko prie įvairaus turinio ir ekranų dydžių. Kuriant maketą pasaulinei auditorijai, nepamirškite atsižvelgti į internacionalizacijos ir lokalizacijos poveikį.

Eksperimentuokite su skirtingomis takelių dydžio nustatymo technikomis ir tyrinėkite begalines CSS Tinklelio galimybes. Su praktika ir tvirtu šių koncepcijų supratimu, būsite gerai pasirengę kurti sudėtingus ir vartotojui draugiškus tinklalapių maketus bet kokiam projektui.