CSS Subgrid: Pesastatud ruudustiku paigutuse pärimise valdamine

CSS Grid on toonud revolutsiooni veebi paigutusse, pakkudes enneolematut kontrolli ja paindlikkust. Keerukad paigutused nõuavad aga sageli pesastatud ruudustikke, mis traditsiooniliselt on esitanud väljakutseid. Siin tuleb appi CSS Subgrid, võimas täiendus Grid Layout moodulile, mis lihtsustab pesastatud ruudustike loomist ja haldamist, võimaldades neil pärida radu oma vanemruudustikult. See artikkel pakub põhjalikku juhendit CSS Subgridi kohta, uurides selle eeliseid, kasutusjuhte ja rakendustehnikaid.

Subgridi vajaduse mõistmine

Enne Subgridi süvenemist on oluline mõista, miks see on vajalik. Kujutage ette stsenaariumi, kus teil on peamine ruudustik, mis määratleb lehe üldise struktuuri. Ühe ruudustiku elemendi sees on teil vaja teist ruudustikku selle sisu paigutuse haldamiseks. Ilma Subgridita võib pesastatud ruudustiku radade (ridade ja veergude) joondamine vanemruudustiku radadega olla tülikas ning nõuda hoolikaid arvutusi ja käsitsi kohandusi.

Kujutage ette vormi siltide ja sisestusväljadega. Te soovite, et sildid joonduksid täiuslikult vastavate sisestusväljadega mitmel real. Ilma Subgridita nõuab selle saavutamine nii vanemruudustiku (mis hoiab vormi) kui ka pesastatud ruudustiku (mis hoiab silte ja sisendeid) veergude laiuste täpset sobitamist. See muutub üha keerulisemaks, mida keerulisemaks paigutus muutub.

Subgrid lahendab selle probleemi, võimaldades pesastatud ruudustikul "üle võtta" oma vanema raja määratlused. See tähendab, et pesastatud ruudustiku veerud ja/või read saavad otse joonduda vanemruudustiku veergude ja/või ridadega, kaotades vajaduse käsitsi sünkroniseerimise järele.

Mis on CSS Subgrid?

CSS Subgrid on CSS Grid Layout spetsifikatsiooni (tase 2) funktsioon, mis võimaldab ruudustiku elemendil määratleda end alaruudustikuna. Kui ruudustiku element on alaruudustik, osaleb see vanemruudustiku radade suuruse määramise algoritmis. Sisuliselt pärib see rea ja/või veeru määratlused oma vanemruudustikult, võimaldades sujuvat joondamist vanema ja lapse ruudustiku struktuuride vahel.

Mõelge sellest kui viisist luua ühtne paigutussüsteem, kus pesastatud ruudustikud käituvad vanemruudustiku loogiliste laiendustena, säilitades visuaalse järjepidevuse ja lihtsustades keerukaid disainilahendusi. See on eriti kasulik:

• Vormide paigutused: Siltide ja sisestusväljade täiuslik joondamine.
• Kaartide paigutused: Ühtlase vahe ja joondamise tagamine mitme kaardi vahel.
• Juhtpaneelide paigutused: Visuaalselt meeldivate ja struktureeritud juhtpaneelide loomine keerukate andmekuvadega.
• Igasugune paigutus korduvate elementidega, mis peavad joonduma vanemruudustiku struktuuriga.

CSS Subgridi põhimõisted

Subgridi tõhusaks kasutamiseks on oluline mõista järgmisi põhimõisteid:

1. `grid-template-columns: subgrid;` ja `grid-template-rows: subgrid;`

Need omadused on Subgridi süda. Kui neid rakendada ruudustiku elemendile, annavad need brauserile teada, et see element peaks käituma alaruudustikuna, pärides veeru ja/või rea määratlused oma vanemruudustikult. Saate valida, kas kasutada `subgrid`'i kas veergude, ridade või mõlema jaoks, sõltuvalt teie paigutusnõuetest.

Näiteks:

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

.child {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  /* Pärib veeru määratlused vanemalt */
}
            

              
                Copy
              
            
          

Selles näites on `.child` ruudustiku element `.parent` sees. Seades `grid-template-columns: subgrid;`, pärib `.child` veeru määratlused (st `1fr 2fr 1fr`) `.parent`'ilt.

2. Selgesõnaline vs. kaudne raja suuruse määramine

Subgridi kasutamisel saate selgesõnaliselt määratleda radade suurused alaruudustikus või tugineda kaudsele raja suuruse määramisele. Kui määrate `grid-template-columns: subgrid;` ja vanemruudustikul on määratletud veergude suurused, pärib alaruudustik need suurused. Kui aga alaruudustik ulatub üle mitme rea või veeru vanemruudustikus, peate võib-olla määratlema, kuidas neid ulatuvaid radu alaruudustikus suurustatakse.

3. `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`

Need omadused määravad alaruudustiku asukoha ja ulatuse vanemruudustikus. Kasutate neid omadusi, et määratleda, milliseid ridu ja veerge alaruudustik vanemruudustikus hõivab. On oluline mõista, kuidas need omadused suhtlevad alaruudustiku päritud raja määratlustega.

Näiteks, kui alaruudustik ulatub üle kahe veeru vanemruudustikus, pärib see nende kahe veeru suurused ja jaotab oma sisu vastavalt.

4. Ruudustikujoonte nimetamine

Ruudustikujoonte nimetamine vanemruudustikus muutub Subgridiga veelgi võimsamaks. Jooni nimetades saate neile alaruudustikus hõlpsasti viidata, luues semantilisema ja hooldatavama paigutuse. See võimaldab keerukamaid joondusi ja elementide paigutamist alaruudustikus võrreldes vanemruudustikuga.

            .parent {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
  grid-template-rows: auto auto;
}

.child {
  grid-column: content-start / content-end;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
}
            

              
                Copy
              
            
          

Sel juhul ulatub `.child` element vanemruudustikus joonest `content-start` jooneni `content-end`. Selle veerud pärivad nüüd nende joonte vahel määratletud suurused.

CSS Subgridi rakendamine: praktiline näide

Illustreerime Subgridi praktilise näitega: vormi loomine joondatud siltide ja sisestusväljadega.

HTML struktuur:

            <div class="form-container">
  <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>
</div>
            

              
                Copy
              
            
          

CSS-stiilimine Subgridiga:

            .form-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Määratle sildi ja sisendi veeru laiused */
  grid-gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  /* Pärib veeru määratlused klassist .form-container */
}

label {
  text-align: right;
  padding-right: 10px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
}

/* Valikuline: Stiili ruudustikujooned silumiseks */
.form-container, .form-row {
    /* outline: 1px solid red; */ /* Aitab ruudustiku struktuuri visualiseerida */
}

            

              
                Copy
              
            
          

Selles näites on `.form-container` vanemruudustik, mis määratleb kaks veergu: ühe siltidele ja teise sisestusväljadele. Iga `.form-row` element on ruudustiku element `.form-container`'i sees ja on samuti määratletud alaruudustikuna, pärides veeru määratlused `.form-container`'ilt. See tagab, et sildid ja sisestusväljad joonduvad täiuslikult kõigil ridadel, luues puhta ja organiseeritud vormipaigutuse.

Subgridi täpsemad tehnikad

1. Radade ületamine Subgridiga

Alaruudustikud võivad ulatuda üle mitme rea või veeru vanemruudustikus. See on kasulik keerukamate paigutuste loomisel, kus pesastatud ruudustiku osa peab vanemruudustikus rohkem ruumi võtma.

            .parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-gap: 10px;
}

.child {
  grid-column: 2 / 4; /* Ulatub üle kahe veeru vanemas */
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  /* Pärib veeru määratlused vanema 2. ja 3. veerust */
}
            

              
                Copy
              
            
          

Selles näites ulatub `.child` üle vanemruudustiku 2. ja 3. veeru. `.child`'i sees olev alaruudustik pärib nende kahe veeru kombineeritud laiused.

2. Subgridi kombineerimine `grid-template-areas`'iga

`grid-template-areas` pakub viisi oma ruudustiku struktuuri visuaalseks määratlemiseks. Saate seda kombineerida Subgridiga, et luua väga struktureeritud ja hooldatavaid paigutusi.

            .parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header header header"
    "sidebar content sidebar";
}

.child {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  /* Pärib veeru määratlused vanema 'content' alast */
}

            

              
                Copy
              
            
          

Siin paigutatakse `.child` element vanemruudustiku `content` alasse ja selle alaruudustik pärib selle ala veeru määratlused.

3. Subgrid `minmax()` funktsiooniga

Funktsioon `minmax()` võimaldab teil määratleda ruudustiku raja minimaalse ja maksimaalse suuruse. See on kasulik, kui soovite tagada, et alaruudustiku rada ei muutuks liiga väikeseks ega liiga suureks, sõltumata selle sisust.

            .parent {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 2fr 1fr;
  grid-template-rows: auto auto;
}

.child {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  /* Pärib minmax() määratluse vanema esimesest veerust */
}
            

              
                Copy
              
            
          

Sel juhul on vanemruudustiku esimese veeru minimaalne laius 100px ja maksimaalne laius 1fr. Alaruudustik pärib selle piirangu, tagades, et selle esimene veerg järgib alati neid piire.

Brauseri ühilduvus ja tagavaralahendused

Kuigi Subgrid on võimas funktsioon, on oluline arvestada brauseri ühilduvusega. 2024. aasta lõpu seisuga toetavad enamik kaasaegseid brausereid, sealhulgas Chrome, Firefox, Safari ja Edge, CSS Subgridi. Vanematel brauseritel ei pruugi aga olla täielikku tuge.

Ühtlase kasutajakogemuse tagamiseks kõigis brauserites kaaluge järgmiste strateegiate rakendamist:

• Funktsioonipäringud (`@supports`): Kasutage funktsioonipäringuid, et tuvastada, kas brauser toetab Subgridi. Kui jah, rakendage Subgridi stiilid; vastasel juhul pakkuge tagavarapaigutus, kasutades vanemaid CSS-tehnikaid nagu Flexbox või traditsiooniline Grid Layout.
• Polüfillid: Uurige polüfillide kasutamist, et pakkuda Subgridi tuge vanemates brauserites. Olge siiski teadlik, et polüfillid võivad lisada lehe laadimisaega ja keerukust.
• Progressiivne täiustamine: Kujundage oma paigutus nii, et see töötaks hästi ka ilma Subgridita. Kasutage Subgridi täiustusena brauseritele, mis seda toetavad, pakkudes paremat ja joondatumat kogemust, ilma et paigutus vanemates brauserites katki läheks.

            @supports (grid-template-columns: subgrid) {
  .form-row {
    display: grid;
    grid-template-columns: subgrid;
  }
}

@supports not (grid-template-columns: subgrid) {
  /* Tagavarapaigutus Flexboxi või vanemate Grid-tehnikate abil */
  .form-row {
    display: flex;
    align-items: center;
  }

  label {
    flex: 1;
    text-align: right;
    padding-right: 10px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    flex: 2;
    width: auto; /* Tühistab peamisest CSS-ist pärit width: 100% */
  }
}
            

              
                Copy
              
            
          

See näide pakub Flexbox-põhist tagavaralahendust brauseritele, mis ei toeta Subgridi, tagades, et vorm jääb funktsionaalseks ja visuaalselt vastuvõetavaks.

CSS Subgridi kasutamise parimad tavad

Subgridi eeliste maksimeerimiseks ja võimalike lõksude vältimiseks järgige neid parimaid tavasid:

• Planeerige oma paigutus: Enne kodeerimise alustamist planeerige hoolikalt oma ruudustiku struktuur. Tehke kindlaks, millised elemendid peavad joonduma ja kus Subgrid saab paigutust lihtsustada.
• Kasutage tähendusrikkaid nimesid: Nimetage oma ruudustikujooned ja -alad kirjeldavalt. See muudab teie koodi loetavamaks ja lihtsamini hooldatavaks.
• Hoidke see lihtsana: Vältige Subgridi liigset kasutamist. Kasutage seda strateegiliselt seal, kus see pakub kõige rohkem kasu, näiteks elementide joondamisel pesastatud ruudustike vahel. Lihtsamate paigutuste jaoks võib piisata traditsioonilisest Grid Layoutist või Flexboxist.
• Testige põhjalikult: Testige oma paigutusi erinevates brauserites ja seadmetes, et tagada ühtlane kasutajakogemus. Pöörake erilist tähelepanu sellele, kuidas paigutus degradeerub brauserites, mis Subgridi ei toeta.
• Dokumenteerige oma kood: Lisage oma CSS-ile kommentaare, et selgitada Subgridi rakendamise eesmärki. See aitab teistel arendajatel (ja teie tulevasel minal) koodi lihtsamini mõista.

Levinud lõksud ja veaotsing

Kuigi Subgrid lihtsustab paljusid paigutuse väljakutseid, on mõned levinud lõksud, millest tuleb teadlik olla:

• Vale `grid-column` ja `grid-row` paigutus: Veenduge, et alaruudustik oleks vanemruudustikus õigesti paigutatud, kasutades `grid-column-start`, `grid-column-end`, `grid-row-start` ja `grid-row-end`. Vale paigutus võib põhjustada ootamatuid paigutustulemusi.
• Vastuolulised raja määratlused: Kui alaruudustiku raja määratlused on vastuolus vanemruudustiku omadega, võivad tulemused olla ettearvamatud. Veenduge, et alaruudustik pärib soovitud raja määratlused ja et vastuolulisi stiile ei oleks.
• Unustades seada `display: grid;`: Pidage meeles seada `display: grid;` nii vanemruudustikule kui ka alaruudustiku elemendile. Ilma selleta ei rakendata ruudustiku paigutust õigesti.
• Ootamatu ülevool: Kui alaruudustiku raja sisu ületab sellele eraldatud ruumi, võib see põhjustada ülevooluprobleeme. Kasutage `overflow: auto;` või muid ülevoolu omadusi sisu haldamiseks alaruudustiku radades.
• Brauseri ühilduvusprobleemid: Testige alati oma paigutusi mitmes brauseris ja pakkuge tagavaralahendusi vanematele brauseritele, mis Subgridi ei toeta.

Reaalse maailma rakendused ja näited

Subgrid on mitmekülgne tööriist, mida saab rakendada paljudes reaalsetes veebidisaini stsenaariumides. Siin on mõned näited:

• Keerukad tootenimekirjad: Ühtlaste ja joondatud tootenimekirjade loomine erineva pikkusega sisuga.
• Andmetabelid fikseeritud päistega: Andmetabeli päiste joondamine vastavate andmeveergudega, isegi kui tabel on keritav.
• Ajakirja-stiilis paigutused: Visuaalselt meeldivate ja struktureeritud ajakirja-stiilis paigutuste kujundamine pesastatud ruudustike ja erinevate sisuplokkidega.
• Kasutajaliidese komponendid: Korduvkasutatavate kasutajaliidese komponentide, näiteks kaartide ja navigeerimismenüüde, ehitamine ühtlase vahe ja joondamisega.
• Rahvusvahelistatud veebisaidid: Subgrid aitab hallata paigutusi, kus teksti pikkus keelte vahel oluliselt varieerub. Pärilikud joondamisvõimalused aitavad säilitada visuaalset järjepidevust isegi erineva suurusega sisu korral. Näiteks on saksakeelsed nuppude sildid sageli palju pikemad kui nende ingliskeelsed vasted. Subgridi kasutamine nuppude (ikoon + silt) jaoks ühtse ruudustiku struktuuri määratlemiseks tagab, et ikoon ja silt jäävad lokaliseerimisest tingitud teksti pikkuse muutustest hoolimata õigesti joondatuks.
• Veebisaidid paremalt-vasakule (RTL) keeltega: Kuigi CSS Grid ja Flexbox saavad RTL-paigutustega üldiselt hästi hakkama, võib Subgrid olla eriti kasulik keerukates pesastatud paigutustes, kus vajate elementide joondamisel täpset kontrolli. Näiteks kontaktivormis, kus sildid on paremal ja sisestusväljad vasakul, saab Subgrid tagada siltide ja sisestusväljade täiusliku joondamise RTL-režiimis.

CSS-paigutuse tulevik: Subgridist edasi

CSS Subgrid on märkimisväärne samm edasi veebi paigutusvõimalustes, kuid see pole veel loo lõpp. CSS-i töörühm jätkab uute paigutusfunktsioonide ja täiustuste uurimist, sealhulgas:

• Konteineripäringud: Võimaldavad komponentidel kohandada oma stiili oma konteineri suuruse, mitte vaateava suuruse põhjal.
• Kerimispõhised animatsioonid: Võimaldavad animatsioone juhtida lehe kerimisasendi abil.
• Täpsemad Grid-funktsioonid: Edasised täiustused CSS Gridile, näiteks parem kontroll raja suuruse määramise ja joondamise üle.

Nende esilekerkivate tehnoloogiatega kursis olles saate jätkata veebidisaini piiride nihutamist ja luua veelgi kaasahaaravamaid ja kasutajasõbralikumaid kogemusi.

Kokkuvõte

CSS Subgrid on võimas tööriist pesastatud ruudustiku paigutuste valdamiseks ja pikslitäpse joondamise saavutamiseks keerukates veebidisainides. Mõistes selle põhimõisteid, rakendades praktilisi näiteid ja järgides parimaid tavasid, saate Subgridi abil luua hooldatavamaid, skaleeritavamaid ja visuaalselt meeldivamaid veebirakendusi. Kuigi brauseri ühilduvuse kaalutlused on olulised, muudavad Subgridi eelised selle väärtuslikuks lisandiks iga esiotsa arendaja tööriistakasti. Võtke Subgrid omaks ja avage uus kontrolli ja paindlikkuse tase oma veebipaigutuse disainides.

Lisamaterjalid

• MDN Web Docs: CSS Subgrid
• CSS Grid Garden: Õpi CSS Gridi
• A Complete Guide to CSS Grid: CSS-Tricks