Šiame trumpame patarime apžvelgsime, kaip naudoti CSS tinklelio antrinio tinklelio funkciją, kad būtų suderintas šalia esančių laukelių turinys.
Pastaba: prieš gilinantis į antrinį tinklelį, svarbu suprasti tinklelio išdėstymo pagrindus. Jei „Grid“ naudojate pirmą kartą arba jums reikia atnaujinimo, peržiūrėkite mūsų pradedančiųjų CSS Grid vadovas.
Problema
Žemiau esančiame paveikslėlyje pavaizduoti trys langeliai iš eilės. Juose yra skirtingas turinio kiekis, tačiau dėl tinklelio išdėstymo jie yra vienodo aukščio.
Tačiau kiekvienos dėžutės komponentai nesutampa vienas su kitu, o tai neatrodo taip gražiai, ir „Grid“ nieko negali padaryti. Kalbant apie tinklelį, yra tik viena laukelių eilutė ir ji nesiūlo būdo juose esančio turinio sulygiuoti į eilutes. Tačiau naudojant subgridgalime gauti žemiau pateiktą rezultatą.
Pasinerkime į tai, kaip naudoti tinklelį ir subtinklelį, kad gautume šį rezultatą.
1 veiksmas: sąranka
Štai pagrindinis mūsų demonstracinės versijos HTML:
<article>
<section></section>
<section></section>
<section></section>
</article>
Turime ir <article> įvynioklis, kuriame yra trys <section> elementai. The <article> turi šį CSS:
article {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Šis CSS sukelia <section> elementai turi būti išdėstyti į tris stulpelius.
Kiekvienas <section> yra an <h1>a <ul> ir a <div>:
<section>
<h1></h1>
<ul></ul>
<div></div>
</section>
Šiame etape kiekvienas tinklelio stulpelis iš tikrųjų yra tokio paties aukščio, bet ne kiekvienas stulpelis yra pilnas turinio, kaip parodyta toliau.
Kiekviename stulpelyje yra skirtingas turinio kiekis, todėl atrodo, kad jie nėra vienodo aukščio.
2 veiksmas: ekrano nustatymas: sekcijų tinklelis
Galime naudoti tik subgrid elemento, kuris nustatytas, vertė display: grid. Kaip mes norime naudoti subgrid kad suderintume mūsų turinį <section> elementų, todėl turime juos nustatyti display: grid Pirmas:
section {
display: grid;
}
Dabar turinys užpildo kiekvieną mūsų stulpelį, kaip parodyta inspektoriuje.
Štai mūsų atnaujinta demonstracinė versija.
Pastaba: turinys ištemptas iki viso aukščio, nes numatytasis stulpelių nustatymas yra align-content: stretch. (Tai nėra svarbu šiai demonstracinei versijai, bet vis tiek verta atkreipti dėmesį!)
3 veiksmas: antrinio tinklelio naudojimas turiniui suderinti
Paskutinis žingsnis yra gauti tris elementus kiekviename stulpelyje, kad jie būtų sulyginti eilutėse. Pirmiausia nustatome grid-template-rows nuosavybė į subgrid:
section {
display: grid;
grid-template-rows: subgrid;
}
Taip gaunamas rezultatas, pavaizduotas žemiau.
Oi! Kas čia ne taip? Matome tik paskutinį kiekvieno stulpelio elementą.
Problema ta, kad mūsų <article> elementas turi tik vieną eilutę, todėl kiekvienos skilties elementai yra sukrauti vienas ant kito toje vienoje eilutėje.
Paskutinis veiksmas, kurį turime atlikti, yra nurodyti antrinio tinklelio turinį, kad jis apimtų tris eilutes:
section {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
Mūsų turinys dabar apima tris antrinio tinklelio eilutes, kaip parodyta toliau.
Bet pažiūrėkite, tarp kiekvienos eilutės yra tarpų! Tai todėl subgrid paveldi pirminio tinklelio tarpo nustatymą. Mes galime tai pakeisti nustatydami kitą gap vertė. Jeigu kreipsimės gap: 0 mūsų <section> elementų, gauname galutinį rezultatą, kurio siekiame.
Štai mūsų užbaigta demonstracinė versija.
Kaip šalutinė pastaba, alternatyva grid-row: span 3 būtų grid-row: 1 / 3.
Naršyklės palaikymas
Nuo 2023 m. pabaigos subgrid veikė visose pagrindinėse naršyklėse, kaip paaiškinta caniuse svetainė. Taigi pradėti naudoti tikrai naudinga subgrid dabar.
Naršyklėse, kurios palaiko Grid, bet ne subgrid, tikriausiai gausite priimtiną rezultatą. Mūsų pirminė demonstracinė versija buvo gana priimtina, nors atrodo gražiau, kad turinys išlygiuotas horizontaliai.
Naršyklėse, kurios visiškai nepalaiko tinklelio išdėstymo, naudotojai turėtų gauti puikiai tinkantį turinį viename stulpelyje.
Išvada
The subgrid galima nustatyti vertę grid-template-columns ir/arba grid-template-rows, leidžiantį antrinio tinklelio turinį sulygiuoti su pirminių tinklelių stulpeliais ir eilutėmis. Kaip matai, subgrid yra gana paprasta naudoti, bet yra galingas ir labai reikalingas tinklelio išdėstymo priedas.
Norėdami sužinoti daugiau apie viską, ką galite padaryti subgridperžiūrėkite šiuos išteklius:
