CSS Subgrid joondamine: pesastatud ruudustikupaigutuse pärimise valdamine

CSS Subgrid on võimas funktsioon, mis laiendab CSS Grid Layout'i võimalusi, lubades teil luua keerukamaid ja paindlikumaid pesastatud ruudustiku struktuure. See võimaldab ruudustiku elemendil pärida oma vanem-ruudustiku rajadefinitsioonid, pakkudes võrratut kontrolli joondamise ja vahede üle pesastatud paigutustes. See artikkel süveneb CSS Subgridi keerukustesse, uurides selle eeliseid, kasutusjuhtumeid ja praktilist rakendamist koodinäidetega. Käsitleme kõike alates põhimõistetest kuni täiustatud tehnikateni, andes teile võimaluse kasutada Subgridi keerukate ja tundlike disainide loomiseks.

CSS Grid Layout'i mõistmine: Subgridi alus

Enne Subgridi süvenemist on oluline omada kindlat arusaama CSS Grid Layout'ist. Grid Layout on kahemõõtmeline paigutussüsteem, mis võimaldab teil jagada konteineri ridadeks ja veergudeks, paigutades elemendid tekkinud ruudustiku lahtritesse. See pakub võimsaid tööriistu elementide suuruse, asukoha ja joondamise kontrollimiseks.

Siin on lihtne näide CSS Grid konteinerist:

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

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}
            

              
                Copy
              
            
          

Selles näites oleme loonud ruudustikukonteineri kolme võrdse laiusega (1fr) veeruga ja kahe automaatse kõrgusega reaga. Atribuut gap lisab ruudustiku elementide vahele tühimiku.

CSS Subgridi tutvustus: ruudustiku võimaluste laiendamine

Subgrid tugineb CSS Gridi vundamendile, võimaldades pesastatud ruudustikul pärida oma vanem-ruudustiku rajadefinitsioonid (read ja veerud). See tähendab, et saate joondada elemente pesastatud ruudustikus välimise ruudustiku radadega, luues ühtse ja visuaalselt järjepideva paigutuse. See on eriti kasulik keerukate paigutuste puhul, kus elemendid peavad ulatuma üle mitme rea või veeru.

CSS Subgridi kasutamise peamised eelised:

• Parem joondamine: Subgrid tagab täpse joonduse pesastatud ruudustiku elementide ja vanem-ruudustiku radade vahel.
• Vähendatud keerukus: Lihtsustab keerukaid paigutusi, võimaldades määratleda radade suurused ja asukohad vanem-ruudustikus ning pärida need alamruudustikus.
• Täiustatud tundlikkus: Hõlbustab tundlikku disaini, võimaldades alamruudustikel kohaneda oma vanem-ruudustiku suuruse ja kujuga.
• Hooldatavus: Parandab koodi hooldatavust, koondades rajadefinitsioonid vanem-ruudustikku.

CSS Subgridi rakendamine: praktiline juhend

Subgridi rakendamiseks peate deklareerima ruudustiku elemendi alamruudustikuks, määrates atribuutide grid-template-columns ja/või grid-template-rows väärtuseks subgrid. See annab brauserile käsu pärida rajadefinitsioonid vanem-ruudustikust.

Näide: lihtsa Subgrid paigutuse loomine

Vaatleme stsenaariumi, kus meil on peamine ruudustikupaigutus kolme veeru ja kahe reaga. Soovime luua ühe ruudustiku elemendi sisse alamruudustiku, mis joonduks peamise ruudustiku veergudega.

            <div class="grid-container">
  <div class="grid-item item1">Item 1</div>
  <div class="grid-item item2">Item 2</div>
  <div class="grid-item item3">Item 3</div>
  <div class="grid-item item4">Item 4</div>
  <div class="grid-item item5">Item 5
    <div class="subgrid-container">
      <div class="subgrid-item">Subitem 1</div>
      <div class="subgrid-item">Subitem 2</div>
      <div class="subgrid-item">Subitem 3</div>
    </div>
  </div>
  <div class="grid-item item6">Item 6</div>
</div>
            

              
                Copy
              
            
          

Nüüd lisame CSS-i:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  width: 80%;
  margin: 20px auto;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

.item5 {
  display: grid; /* Lubab selle elemendi jaoks ruudustikupaigutuse */
}

.subgrid-container {
  display: grid;
  grid-column: 1 / -1; /* Hõlmab kõiki vanem-ruudustiku elemendi veerge */
  grid-template-columns: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

.subgrid-item {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #bbb;
}
            

              
                Copy
              
            
          

Selles näites on .subgrid-container alamruudustik, mis pärib veerurajad .grid-container'ilt. Me kasutame .subgrid-container'il grid-column: 1 / -1;, et tagada selle laienemine üle kogu .grid-item.item5 laiuse, mis kindlustab, et alamruudustik joonduks vanem-ruudustiku veergudega. Alamruudustiku elemendid joonduvad automaatselt vanem-ruudustikus määratletud veergudega.

Selgesõnaline radade suuruse määramine nimega ruudustikujoontega

Keerukamate paigutuste jaoks võiksite soovida radade suurusi selgesõnaliselt määratleda ja kasutada nimega ruudustikujooni. See võimaldab teie koodis suuremat kontrolli ja selgust.

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-mid] 2fr [col-end];
  grid-template-rows: [row-start] auto [row-mid] auto [row-end];
  gap: 10px;
}

.subgrid-container {
  display: grid;
  grid-column: 1 / -1; /* Hõlmab kõiki vanem-ruudustiku elemendi veerge */
  grid-template-columns: subgrid [col-start] [col-mid] [col-end];
  grid-template-rows: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

            

              
                Copy
              
            
          

Siin oleme määratlenud nimega ruudustikujooned (col-start, col-mid, col-end, row-start, row-mid, row-end) vanem-ruudustikus. Alamruudustik pärib need nimega jooned, mis võimaldab teil paigutada elemente alamruudustikus nende nimede abil.

Täiustatud Subgrid tehnikad

Radade ületamine Subgridis

Saate radu ületada ka alamruudustikus, täpselt nagu tavalises ruudustikus. See võimaldab teil luua elemente, mis hõivavad alamruudustikus mitu rida või veergu.

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

              
                Copy
              
            
          

See paneb elemendi ulatuma üle kahe veeru ja kahe rea alamruudustikus.

grid-auto-flow kasutamine Subgridiga

Atribuut grid-auto-flow kontrollib, kuidas automaatselt paigutatud elemendid ruudustikku sisestatakse. Seda saab kasutada koos alamruudustikuga, et kontrollida elementide paigutamise suunda.

            .subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-flow: row dense; /* Näidisväärtus */
}

            

              
                Copy
              
            
          

Väärtus row dense paneb elemendid täitma kõik tühimikud ridades, samas kui väärtus column dense täidab tühimikud veergudes.

Kaudsete radade käsitlemine Subgridis

Kui alamruudustiku element paigutatakse väljapoole selgesõnaliselt määratletud radu, luuakse kaudsed rajad. Saate nende kaudsete radade suurust kontrollida atribuutidega grid-auto-rows ja grid-auto-columns.

            .subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: minmax(100px, auto);
}

            

              
                Copy
              
            
          

See tagab, et kõik kaudselt loodud read on minimaalse kõrgusega 100 pikslit ja kohanduvad automaatselt sisu suurusega.

CSS Subgridi reaalse maailma kasutusjuhud

CSS Subgrid on eriti kasulik keerukate paigutuste loomisel erinevates reaalsetes stsenaariumides:

• Vormide paigutused: Vormi siltide ja sisestusväljade joondamine ühtse ruudustiku struktuuriga. Kujutage ette mitmekeelset vormi, kus siltide pikkus varieerub. Subgrid tagab, et sisestusväljad on alati joondatud, olenemata sildi pikkusest.
• Tootenimekirjad: Visuaalselt ahvatlevate tootenimekirjade loomine piltide, pealkirjade ja kirjelduste ühtse joondamisega. Mõelge e-kaubanduse platvormile, mis müüb tooteid erinevatest riikidest. Subgrid aitab säilitada tooteandmete ühtset joondust hoolimata tootenimede või kirjelduste pikkuse erinevustest.
• Juhtpaneelide liidesed: Keerukate juhtpaneelide liideste ehitamine mitme paneeli ja vidinaga, mis peavad omavahel joonduma. Mõelge finantsjuhtpaneelile, mis kuvab graafikuid, tabeleid ja peamisi tulemusnäitajaid. Subgrid tagab, et kõik elemendid on täiuslikult joondatud, luues professionaalse ja kasutajasõbraliku kogemuse.
• Ajakirjade paigutused: Ajakirja stiilis paigutuste kujundamine artiklite, piltide ja pealdistega, mis peavad joonduma üle mitme veeru. Uudiste veebisait saab näiteks kasutada alamvõrku, et säilitada ühtlane võrgustruktuur kodulehe erinevates osades, olenemata sisu tüübist.
• Kalendrivaated: Kalendrivaadete rakendamine, kus sündmused peavad joonduma konkreetsete päevade ja kellaaegadega.

Brauseritugi CSS Subgridile

Brauserite tugi CSS Subgridile on tänapäevastes brauserites üldiselt hea. Seda toetavad Firefox, Chrome, Safari ja Edge. Siiski on alati hea mõte kontrollida uusimaid brauserite ühilduvustabeleid veebisaitidelt nagu Can I use, et tagada tugi oma sihtrühmale. Võiksite kaaluda ka järkjärgulise täiustamise tehnikate kasutamist, et pakkuda tagavara vanematele brauseritele.

Juurdepääsetavuse kaalutlused

CSS Subgridi kasutamisel on oluline arvestada juurdepääsetavusega. Veenduge, et paigutus oleks loogiline ja navigeeritav puuetega kasutajatele. Kasutage semantilisi HTML-elemente ja pakkuge sobivaid ARIA atribuute juurdepääsetavuse parandamiseks. Testige oma paigutust ekraanilugejate ja klaviatuurinavigatsiooniga, et tuvastada ja lahendada võimalikud probleemid. Korralikult järjestatud sisu HTML-lähtekoodis on ekraanilugejate kasutajate jaoks ülioluline. Ärge toetuge teabe edastamisel ainult visuaalsele paigutusele.

CSS Subgrid vs. traditsioonilised paigutustehnikad

Võrreldes traditsiooniliste paigutustehnikatega, nagu floats ja flexbox, pakub CSS Subgrid mitmeid eeliseid:

• Kahemõõtmeline paigutus: Subgrid on mõeldud kahemõõtmeliste paigutuste jaoks, samas kui flexbox on peamiselt ühemõõtmeliste paigutuste jaoks.
• Joondamise kontroll: Subgrid pakub täpsemat kontrolli pesastatud ruudustiku elementide ja vanem-ruudustiku radade vahelise joondamise üle.
• Vähendatud keerukus: Subgrid võib lihtsustada keerukaid paigutusi, võimaldades määratleda radade suurused ja asukohad vanem-ruudustikus ning pärida need alamruudustikus.

Kuigi flexbox on suurepärane elementide paigutamiseks ühes reas või veerus, on Subgrid parim keerukate, kahemõõtmeliste paigutuste loomisel täpse joondamisega.

Näpunäited ja parimad praktikad CSS Subgridi kasutamiseks

• Alustage selge plaaniga: Enne Subgridi rakendamist planeerige oma paigutus hoolikalt ja tuvastage valdkonnad, kus Subgrid võib pakkuda kõige rohkem kasu.
• Kasutage nimega ruudustikujooni: Nimega ruudustikujooned võivad parandada teie koodi loetavust ja hooldatavust.
• Testige põhjalikult: Testige oma paigutust erinevates brauserites ja seadmetes, et tagada ühilduvus ja tundlikkus.
• Arvestage juurdepääsetavusega: Veenduge, et teie paigutus oleks juurdepääsetav puuetega kasutajatele.
• Kasutage tähendusrikkaid klassinimesid: Kasutage selgeid ja kirjeldavaid klassinimesid koodi loetavuse ja hooldatavuse parandamiseks. Näiteks selle asemel, et kasutada üldisi nimesid nagu `item1` või `container`, valige nimed, mis peegeldavad elemendi sisu või funktsiooni, näiteks `product-image` või `navigation-menu`. See muudab iga elemendi eesmärgi mõistmise ja koodi hilisema muutmise lihtsamaks.
• Dokumenteerige oma kood: Lisage oma CSS-ile ja HTML-ile kommentaare, et selgitada erinevate jaotiste eesmärki ja nende koostööd. See on eriti kasulik keerukate paigutuste puhul, mida võib esmapilgul olla raske mõista. Hästi dokumenteeritud kood muudab paigutuse hooldamise ja muutmise teistele arendajatele (või tulevikus iseendale) lihtsamaks.

CSS Subgrid paigutuste silumine

CSS Subgrid paigutuste silumine võib mõnikord olla keeruline. Siin on mõned näpunäited, mis aitavad teil levinud probleeme lahendada:

• Kasutage brauseri arendaja tööriistu: Brauseri arendaja tööriistad pakuvad võimsaid funktsioone CSS Grid ja Subgrid paigutuste uurimiseks. Saate visualiseerida ruudustikujooni, radade suurusi ja elementide asukohti.
• Kontrollige konsoolis vigu: Otsige brauseri konsoolist CSS-i vigu või hoiatusi.
• Lihtsustage paigutust: Kui teil on probleeme keeruka paigutusega, proovige seda lihtsustada, et probleemi ala isoleerida.
• Valideerige oma CSS: Kasutage CSS-i validaatorit süntaksivigade ja muude probleemide kontrollimiseks.
• Uurige arvutatud stiile: Kasutage brauseri arendaja tööriistade vahekaarti "Computed", et uurida igale elemendile rakendatud lõplikke arvutatud stiile, sealhulgas päritud stiile.

Kokkuvõte: CSS Subgridi võimsuse omaksvõtmine

CSS Subgrid on väärtuslik tööriist keerukate ja tundlike pesastatud ruudustikupaigutuste loomiseks. Mõistes selle funktsioone ja eeliseid, saate Subgridi abil oma veebidisaini oskusi täiustada ja ehitada keerukamaid ja visuaalselt ahvatlevamaid veebisaite. Olgu tegemist vormide paigutuste, tootenimekirjade või juhtpaneelide liideste kujundamisega, Subgrid pakub paindlikkust ja kontrolli, mida vajate pikslitäpsete paigutuste loomiseks. Kuna brauserite tugi jätkuvalt paraneb, on Subgridist saamas iga esiotsa arendaja tööriistakasti oluline osa.

Katsetage selles artiklis toodud näidetega ja uurige CSS Subgridi erinevaid funktsioone. Harjutamisega saate Subgridi meisterdada ja luua vapustavaid veebipaigutusi, mis on nii funktsionaalsed kui ka visuaalselt ahvatlevad. Kaaluge panustamist avatud lähtekoodiga projektidesse, mis kasutavad CSS Gridi ja Subgridi, et oma oskusi ja tehnoloogia mõistmist veelgi täiustada.

Lisamaterjalid

• MDN Web Docs: CSS Subgrid paigutus
• CSS Grid Layout moodul, tase 2
• Can I use: CSS Subgrid