CSS Subgrid: atverkite įdėtųjų maketų galią

CSS Grid sukėlė revoliuciją interneto maketavime, suteikdamas neprilygstamą lankstumą ir kontrolę. Tačiau įdėtųjų tinklelių valdymas kartais gali tapti sudėtingas. Būtent čia į pagalbą ateina CSS Subgrid. Subgrid leidžia tinklelio elementui paveldėti savo pirminio tinklelio takelių dydžius, taip supaprastinant sudėtingus maketus ir padarant jūsų kodą lengviau prižiūrimą. Šiame straipsnyje pateikiamas išsamus vadovas, kaip suprasti ir įdiegti CSS Subgrid, su praktiniais pavyzdžiais ir įžvalgomis visų lygių programuotojams.

Kas yra CSS Subgrid?

Subgrid yra CSS tinklelio funkcija, kuri leidžia tinklelio elementui pačiam tapti tinkleliu, paveldivusiam eilutės ir stulpelių takelius, apibrėžtus jo pirminiame tinklelyje. Tai reiškia, kad galite lygiuoti turinį per kelis įdėtuosius tinklelius, neapibrėždami takelių dydžių kiekviename įdėtajame tinklelyje atskirai. Galvokite apie tai kaip apie būdą išplėsti pirminio tinklelio struktūrą į jo vaikinius elementus, sukuriant vientisesnį ir nuoseklesnį maketą.

Kodėl verta naudoti Subgrid?

Supaprastinti maketai: Subgrid sumažina įdėtųjų tinklelių sudėtingumą, todėl jūsų CSS kodas tampa švaresnis ir lengviau suprantamas.
Nuoseklus lygiavimas: Lengvai lygiuokite turinį per kelis įdėjimo lygius, užtikrindami vizualiai patrauklų ir profesionalų dizainą.
Pagerintas prižiūrimumas: Pakeitimai pirminiame tinklelyje automatiškai persiduoda antriniams tinkleliams, todėl sumažėja poreikis rankiniu būdu koreguoti keliose vietose.
Patobulintas adaptyvumas: Subgrid sklandžiai veikia su adaptyvaus dizaino principais, pritaikydamas maketus prie skirtingų ekrano dydžių, nesukeliant maketo lūžių.

Naršyklių suderinamumas

Prieš pradedant diegimą, būtina patikrinti naršyklių suderinamumą. 2023 m. pabaigoje Subgrid buvo gerai palaikomas šiuolaikinėse naršyklėse, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau visada gera praktika yra naudoti Can I use, kad patikrintumėte naujausią palaikymo būseną.

Pagrindinis Subgrid diegimas

Pradėkime nuo paprasto pavyzdžio, kad iliustruotume pagrindines Subgrid koncepcijas.

HTML struktūra

Pirmiausia apibrėžiame pagrindinę HTML struktūrą mūsų tinkleliui.


<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS stiliai

Dabar apibrėžkime CSS, kad sukurtume pagrindinį tinklelį ir antrinį tinklelį .content elemente.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Apibrėžkite elementų vietą .content antriniame tinklelyje */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

Šiame pavyzdyje .content elementas apibrėžiamas kaip antrinis tinklelis. grid-template-columns: subgrid; ir grid-template-rows: subgrid; savybės nurodo antriniam tinkleliui paveldėti takelių dydžius iš pagrindinio tinklelio. Turinio sritis dabar atitinka takelių dydžius, apibrėžtus pagrindiniame konteinerio tinklelyje, nereikalaujant jokių aiškių nustatymų pačiam antriniam tinkleliui. Tai užtikrina tobulą lygiavimą tarp šoninės juostos ir elementų turinio srityje.

Pažangios Subgrid technikos

Takelių apjungimas

Subgrid taip pat leidžia antrinio tinklelio elementams apimti kelis takelius, kaip ir įprastame tinklelyje. Tai suteikia dar daugiau lankstumo kuriant sudėtingus maketus.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Šis kodas privers .item-1 apimti pirmuosius du antrinio tinklelio stulpelius.

Pavadintos tinklelio linijos

Galite naudoti pavadintas tinklelio linijas su Subgrid, kad pasiektumėte dar didesnį aiškumą ir kontrolę. Tarkime, jūsų pirminiame tinklelyje yra pavadintos linijos:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

Tada galite nurodyti šias pavadintas linijas savo antriniame tinklelyje:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

Numanomų takelių tvarkymas

Jei tinklelio elementų skaičius viršija apibrėžtų takelių skaičių pirminiame tinklelyje, Subgrid sukurs numanomus takelius. Galite kontroliuoti šių numanomų takelių dydį naudodami grid-auto-rows ir grid-auto-columns savybes, panašiai kaip įprastame CSS tinklelyje.

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių, kaip Subgrid gali būti naudojamas kuriant sudėtingus maketus.

Sudėtingas produktų sąrašas

Įsivaizduokite produktų sąrašą, kuriame norite nuosekliai ir lygiai rodyti kelias produkto detales (paveikslėlį, pavadinimą, aprašymą, kainą). Subgrid gali padėti tai lengvai pasiekti.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

Šiame pavyzdyje .product elementai naudoja Subgrid, kad nuosekliai lygiuotų paveikslėlį, pavadinimą, aprašymą ir kainą visuose produktuose, net jei jų turinio ilgis skiriasi. Tai užtikrina švarų ir profesionalų pateikimą.

Žurnalo tipo maketas

Sukurti žurnalo stiliaus maketus su įvairiais turinio blokais gali būti sudėtinga. Subgrid supaprastina procesą, leisdamas jums lygiuoti elementus skirtingose maketo dalyse.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

Šiame pavyzdyje pagrindinis straipsnis, šoninės juostos straipsnis ir iškeltas paveikslėlis dalijasi ta pačia tinklelio struktūra, užtikrinant nuoseklų antraščių ir turinio lygiavimą skirtingose dalyse. Subgrid naudojimas supaprastina CSS ir padaro maketą lengviau prižiūrimą.

Formų maketai

Sukurti sudėtingus formų maketus su lygiai išdėstytomis etiketėmis ir įvesties laukais gali būti sudėtinga. Subgrid suteikia paprastą sprendimą.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


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

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Apibrėžkite takelių dydžius pagrindiniame tinklelyje */
    gap: 10px;
}

Čia .form-row elementai naudoja Subgrid, kad nuosekliai lygiuotų etiketes ir įvesties laukus visose eilutėse. Takelių dydžiai yra apibrėžti pirminiame tinklelyje (.form-grid), užtikrinant vienodą išvaizdą.

Geroji praktika ir svarstymai

Pradėkite nuo tvirto tinklelio pagrindo: Prieš diegdami Subgrid, įsitikinkite, kad jūsų pirminis tinklelis yra gerai apibrėžtas ir adaptyvus.
Naudokite pavadintas tinklelio linijas: Pavadintos tinklelio linijos pagerina skaitomumą ir prižiūrimumą, ypač sudėtinguose maketuose.
Kruopščiai testuokite: Testuokite savo Subgrid maketus skirtingose naršyklėse ir įrenginiuose, kad užtikrintumėte nuoseklų atvaizdavimą.
Atsižvelkite į prieinamumą: Užtikrinkite, kad jūsų Subgrid maketai būtų prieinami neįgaliems vartotojams, naudodami semantinį HTML ir pateikdami atitinkamus ARIA atributus.
Nenaudokite Subgrid per daug: Nors Subgrid yra galingas, jis ne visada yra geriausias sprendimas. Apsvarstykite paprastesnes alternatyvas, tokias kaip Flexbox ar įprastas Grid, mažiau sudėtingiems maketams.

Subgrid prieš įprastą CSS tinklelį

Nors tiek Subgrid, tiek CSS tinklelis yra galingi maketavimo įrankiai, jie tarnauja skirtingiems tikslams. Įprastas CSS tinklelis idealiai tinka bendram puslapio maketui kurti ir pagrindinei jūsų turinio struktūrai apibrėžti. Kita vertus, Subgrid geriausiai tinka valdyti įdėtuosius maketus ir lygiuoti turinį per kelis įdėjimo lygius. Galvokite apie Subgrid kaip apie CSS tinklelio plėtinį, kuris supaprastina sudėtingus maketavimo scenarijus.

Dažniausių problemų sprendimas

Subgrid neveikia: Dar kartą patikrinkite naršyklės suderinamumą ir įsitikinkite, kad įjungėte Subgrid, nustatydami grid-template-columns: subgrid; ir/arba grid-template-rows: subgrid; antrinio tinklelio elementui.
Lygiavimo problemos: Patikrinkite, ar takelių dydžiai jūsų pirminiame tinklelyje yra teisingai apibrėžti ir ar antrinio tinklelio elementai yra tinkamai išdėstyti naudojant grid-column ir grid-row.
Netikėti maketo lūžiai: Išbandykite savo maketą skirtingų dydžių ekranuose, kad nustatytumėte ir ištaisytumėte bet kokias adaptyvaus dizaino problemas.

Išvada

CSS Subgrid yra vertingas CSS tinklelio įrankių rinkinio papildymas, siūlantis galingą būdą valdyti sudėtingus įdėtuosius maketus ir kurti vizualiai patrauklius, prižiūrimus ir adaptyvius interneto dizainus. Suprasdami pagrindines koncepcijas ir nagrinėdami praktinius pavyzdžius, galite pasinaudoti Subgrid kurdami sudėtingus maketus, kuriuos anksčiau buvo sunku arba neįmanoma pasiekti naudojant tradicines CSS technikas. Priimkite Subgrid ir atraskite naujas galimybes savo interneto kūrimo projektuose. Subgrid leidžia jums iš tiesų išplėsti CSS tinklelio galią į įdėtuosius elementus, suteikiant didesnę kontrolę ir kodo prižiūrimumą. Eksperimentuokite su juo ir atraskite privalumus supaprastinant sudėtingus CSS maketus.

MLOG