CSS Subgrid: Pesastatud Paigutuste Võimekuse Avamine

CSS Grid on veebipaigutuse revolutsiooniliselt muutnud, pakkudes enneolematut paindlikkust ja kontrolli. Siiski võib pesastatud gridide haldamine mõnikord muutuda tülikaks. Siin tulebki appi CSS Subgrid. Subgrid võimaldab grid-elemendil pärida oma vanem-gridi ridade ja veergude suurused, lihtsustades keerukaid paigutusi ja muutes teie koodi hooldatavamaks. See artikkel pakub põhjalikku juhendit CSS Subgridi mõistmiseks ja rakendamiseks, koos praktiliste näidete ja teadmistega igal tasemel arendajatele.

Mis on CSS Subgrid?

Subgrid on CSS Gridi funktsioon, mis võimaldab grid-elemendil muutuda ise gridiks, pärides oma vanem-gridis määratletud rea- ja veerurajad. See tähendab, et saate sisu joondada mitme pesastatud gridi vahel ilma, et peaksite iga pesastatud gridi jaoks eraldi radade suurusi määratlema. Mõelge sellest kui viisist laiendada vanem-gridi struktuuri selle lastele, luues ühtsema ja järjepidevama paigutuse.

Miks kasutada Subgridi?

Lihtsustatud paigutused: Subgrid vähendab pesastatud gridide keerukust, muutes teie CSS-koodi puhtamaks ja kergemini mõistetavaks.
Järjepidev joondamine: Joondage sisu hõlpsalt mitmel pesastustasandil, tagades visuaalselt meeldiva ja professionaalse kujunduse.
Parem hooldatavus: Muudatused vanem-gridis kanduvad automaatselt üle alamgrididele, vähendades vajadust käsitsi kohanduste järele mitmes kohas.
Parem reageerivus: Subgrid töötab sujuvalt koos reageeriva disaini põhimõtetega, kohandades paigutusi erinevate ekraanisuurustega ilma paigutuse katkemisteta.

Veebilehitsejate ühilduvus

Enne rakendamisega alustamist on oluline kontrollida veebilehitsejate ühilduvust. 2023. aasta lõpu seisuga on Subgridil hea tugi kaasaegsetes brauserites, sealhulgas Chrome, Firefox, Safari ja Edge. Siiski on alati hea tava kasutada Can I use veebisaiti, et kontrollida uusimat toe staatust.

Subgridi põhiline rakendamine

Alustame lihtsa näitega, et illustreerida Subgridi põhikontseptsioone.

HTML struktuur

Esmalt määratleme oma gridi jaoks põhilise HTML-struktuuri.


<div class="container">
  <div class="header">Päis</div>
  <div class="sidebar">Külgriba</div>
  <div class="content">
    <div class="item-1">Element 1</div>
    <div class="item-2">Element 2</div>
    <div class="item-3">Element 3</div>
    <div class="item-4">Element 4</div>
  </div>
  <div class="footer">Jalus</div>
</div>

CSS-stiilid

Nüüd määratleme CSS-i, et luua vanem-grid ja selle sees olev subgrid .content elemendis.


.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;
}

/* Määratle elementide paigutus .content subgridi sees */
.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; }

Selles näites on .content element määratletud kui subgrid. Omadused grid-template-columns: subgrid; ja grid-template-rows: subgrid; annavad subgridile käsu pärida radade suurused vanem-gridilt. Sisu ala vastab nüüd põhikonteineri gridis määratletud radade suurustele, ilma et oleks vaja subgridi jaoks eraldi seadeid määrata. See tagab külgriba ja sisu ala elementide vahel täiusliku joonduse.

Subgridi edasijõudnud tehnikad

Radade ületamine

Subgrid võimaldab ka subgridi sees olevatel elementidel ulatuda üle mitme raja, täpselt nagu tavalises gridis. See pakub veelgi suuremat paindlikkust keerukate paigutuste loomisel.


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

See kood paneb .item-1 elemendi ulatuma üle subgridi kahe esimese veeru.

Nimega gridi jooned

Saate Subgridiga kasutada nimega gridi jooni, et saavutada veelgi suurem selgus ja kontroll. Oletame, et teil on vanem-gridis nimega jooned:


.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;
}

Seejärel saate neile nimega joontele viidata oma subgridis:


.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;
}

Implitseeritud radade käsitlemine

Kui grid-elementide arv ületab vanem-gridis määratletud radade arvu, loob Subgrid implitseeritud (kaudseid) radu. Saate nende implitseeritud radade suurust kontrollida omadustega grid-auto-rows ja grid-auto-columns, sarnaselt tavalise CSS Gridiga.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid, kuidas Subgridi saab kasutada keerukate paigutuste loomiseks.

Keerukas tootenimekiri

Kujutage ette tootenimekirja, kus soovite kuvada mitmeid toote üksikasju (pilt, nimi, kirjeldus, hind) järjepideval ja joondatud viisil. Subgrid aitab seda hõlpsalt saavutada.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Toode 1">
    <h3>Toote nimi 1</h3>
    <p>Toote 1 kirjeldus.</p>
    <span>99,99 €</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Toode 2">
    <h3>Toote nimi 2</h3>
    <p>Toote 2 kirjeldus.</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;
}

Selles näites kasutavad .product elemendid Subgridi, et pilti, nime, kirjeldust ja hinda kõigi toodete lõikes ühtlaselt joondada, isegi kui nende sisu pikkus varieerub. See tagab puhta ja professionaalse esitluse.

Ajakirja paigutus

Ajakirja stiilis paigutuste loomine erinevate sisuplokkidega võib olla keeruline. Subgrid lihtsustab seda protsessi, võimaldades teil elemente joondada paigutuse erinevates osades.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Peaartikli pealkiri</h2>
    <p>Peaartikli sisu...</p>
  </div>
  <div class="sidebar-article">
    <h3>Külgriba artikli pealkiri</h3>
    <p>Külgriba artikli sisu...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Esiletõstetud pilt">
  </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;
}

Selles näites jagavad peaartikkel, külgriba artikkel ja esiletõstetud pilt sama grid-struktuuri, tagades pealkirjade ja sisu järjepideva joonduse erinevates osades. Subgridi kasutamine lihtsustab CSS-i ja muudab paigutuse hooldatavamaks.

Vormide paigutused

Keerukate vormipaigutuste loomine joondatud siltide ja sisendväljadega võib olla keeruline. Subgrid pakub selleks otsekohest lahendust.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Nimi:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">E-post:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Sõnum:</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; /* Määratle radade suurused vanem-gridis */
    gap: 10px;
}

Siin kasutavad .form-row elemendid Subgridi, et joondada sildid ja sisendväljad kõigis ridades järjepidevalt. Radade suurused on määratletud vanem-gridis (.form-grid), tagades ühtlase välimuse.

Parimad tavad ja kaalutlused

Alustage tugevast grid-alusest: Enne Subgridi rakendamist veenduge, et teie vanem-grid on hästi defineeritud ja reageeriv.
Kasutage nimega gridi jooni: Nimega gridi jooned parandavad loetavust ja hooldatavust, eriti keerukates paigutustes.
Testige põhjalikult: Testige oma Subgridi paigutusi erinevates brauserites ja seadmetes, et tagada järjepidev kuvamine.
Mõelge juurdepääsetavusele: Veenduge, et teie Subgridi paigutused on puuetega kasutajatele juurdepääsetavad, kasutades semantilist HTML-i ja pakkudes sobivaid ARIA atribuute.
Ärge kasutage Subgridi üle: Kuigi Subgrid on võimas, ei ole see alati parim lahendus. Vähem keerukate paigutuste jaoks kaaluge lihtsamaid alternatiive nagu Flexbox või tavaline Grid.

Subgrid vs. tavaline CSS Grid

Kuigi nii Subgrid kui ka CSS Grid on võimsad paigutustööriistad, on neil erinevad eesmärgid. Tavaline CSS Grid on ideaalne üldiste leheküljepaigutuste loomiseks ja teie sisu põhistruktuuri määratlemiseks. Subgrid seevastu sobib kõige paremini pesastatud paigutuste haldamiseks ja sisu joondamiseks mitmel pesastustasandil. Mõelge Subgridist kui CSS Gridi laiendusest, mis lihtsustab keerukaid paigutuse stsenaariume.

Levinud probleemide tõrkeotsing

Subgrid ei tööta: Kontrollige uuesti oma brauseri ühilduvust ja veenduge, et olete Subgridi lubanud, määrates subgridi elemendile grid-template-columns: subgrid; ja/või grid-template-rows: subgrid;.
Joondusprobleemid: Veenduge, et teie vanem-gridi radade suurused on õigesti määratletud ja et subgridi elemendid on õigesti paigutatud, kasutades grid-column ja grid-row.
Ootamatud paigutuse katkemised: Testige oma paigutust erinevatel ekraanisuurustel, et tuvastada ja parandada reageeriva disaini probleeme.

Kokkuvõte

CSS Subgrid on väärtuslik lisand CSS Gridi tööriistakasti, pakkudes võimsat viisi keerukate pesastatud paigutuste haldamiseks ning visuaalselt meeldivate, hooldatavate ja reageerivate veebidisainide loomiseks. Mõistes põhikontseptsioone ja uurides praktilisi näiteid, saate Subgridi abil luua keerukaid paigutusi, mida oli varem traditsiooniliste CSS-tehnikatega raske või võimatu saavutada. Võtke Subgrid omaks ja avage uusi võimalusi oma veebiarendusprojektides. Subgrid võimaldab teil tõeliselt laiendada CSS gridi võimsust pesastatud elementidesse, pakkudes suuremat kontrolli ja koodi hooldatavust. Katsetage sellega ja avastage eeliseid keeruliste CSS-paigutuste lihtsustamisel.

MLOG