CSS Grid Subgrid: Süvaülevaade täiustatud paigutuse kompositsioonist

Aastaid on veebiarendajad ja disainerid kasutanud CSS Gridi võimsust, et luua keerukaid, kahemõõtmelisi paigutusi enneolematu kontrolli ja paindlikkusega. Grid muutis revolutsiooniliselt meie arusaama veebilehe struktuurist, viies meid eemale floatide piirangutest ja Flexboxi ühemõõtmelisest olemusest. Kuid isegi selle võimsuse juures püsis üks korduv väljakutse: elementide joondamine pesastatud gridides peamise vanem-gridiga. See oli tavaline frustratsiooni allikas, mis viis sageli keeruliste lahenduste, käsitsi arvutuste või pesastatud gridi struktuurist loobumiseni. Siin tuleb mängu CSS Subgrid, kauaoodatud funktsioon, mis lahendab elegantselt just selle probleemi, avades uue taseme täpsuses ja keerukuses paigutuse kompositsioonis.

See põhjalik juhend on mõeldud globaalsele publikule, kuhu kuuluvad esirakenduse arendajad, veebidisainerid ja kasutajaliidese insenerid. Uurime CSS Subgridi olemust, põhjuseid ja kasutusviise, liikudes põhimõistetest edasijõudnud praktiliste rakendusteni. Lõpuks ei mõista te mitte ainult Subgridi, vaid olete ka varustatud oskustega, et luua selle abil robustsemaid, hooldatavamaid ja kaunilt joondatud paigutusi.

Väljakutse enne Subgridi: Pesastatud gridi dilemma

Et täielikult hinnata, mida Subgrid pakub, peame esmalt mõistma maailma ilma selleta. Kujutage ette, et teil on lehe sisu jaoks peamine grid-paigutus. Ühe grid-elemendi sees peate looma veel ühe gridi – pesastatud gridi. See on väga levinud muster, eriti komponendipõhises disainis.

Vaatleme tüüpilist kaardipaigutust. Teil on konteiner, mis hoiab mitut kaarti, ja see konteiner on CSS Grid. Iga kaart on grid-element. Iga kaardi sees soovite samuti kasutada gridi selle sisu struktureerimiseks – päis, põhiosa ja jalus.

Ilma Subgridita ei ole kaardi sees asuval pesastatud gridil teadlikkust vanemkonteineri grid-joontest. See loob omaenda, sõltumatu gridi vormindamise konteksti. See tähendab, et rajad (veerud ja read), mille te kaardi sees defineerite, on täielikult eraldatud peamise konteineri radadest.

Visuaalne näide probleemist

Kujutage ette tootenimekirja, kus iga toode on kaart. Soovite, et toodete pealkirjad joonduksid horisontaalselt üle kõikide kaartide ja et iga kaardi allosas olevad "Lisa ostukorvi" nupud joonduksid samuti, sõltumata keskel oleva kirjelduse pikkusest. Tavalise pesastatud gridiga on seda peaaegu võimatu saavutada ilma fikseeritud kõrguste või JavaScripti arvutusteta.

Siin on lihtsustatud koodinäide sellest stsenaariumist:

HTML struktuur:

            <div class="card-container">
  <div class="card">
    <h3>Toode A</h3>
    <p>Lühike ja konkreetne kirjeldus.</p>
    <button>Lisa ostukorvi</button>
  </div>
  <div class="card">
    <h3>Toode B</h3>
    <p>Sellel tootel on palju pikem kirjeldus, mis murdub mitmele reale, põhjustades joondusprobleeme allolevatele elementidele.</p>
    <button>Lisa ostukorvi</button>
  </div>
  <div class="card">
    <h3>Toode C</h3>
    <p>Veel üks kirjeldus.</p>
    <button>Lisa ostukorvi</button>
  </div>
</div>
            

              
                Copy
              
            
          

CSS (ilma Subgridita):

            .card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  border: 1px solid #ccc;
  padding: 15px;
  display: grid;
  grid-template-rows: auto 1fr auto; /* Päis, Kere (venib), Jalus */
  gap: 10px;
}

.card h3 {
  /* Positsioneerimiseks pole vaja eristiilimist */
}

.card p {
  /* See venib 1fr tõttu */
}

.card button {
  align-self: end; /* Püüab lükata nupu oma grid-ala allossa */
}

            

              
                Copy
              
            
          

Selles näites on teise kaardi nupp madalamal kui teiste kaartide nupud, sest selle kirjeldus võtab rohkem ruumi. Iga kaardi sisemine grid on täiesti iseseisev. Lõigu rea jaoks kasutatud `1fr` ühik kehtib ainult selle ühe kaardi vaba kõrguse kontekstis. Nuppude joondamiseks puudub ühine grid-joon. See on täpselt see probleem, mille lahendamiseks Subgrid loodi.

Tutvustame CSS Subgridi: Puuduv tükk täiuslikuks joondamiseks

CSS Subgrid on väärtus `grid-template-columns` ja `grid-template-rows` jaoks. Kui seda rakendada grid-elemendile (mis ise muutub grid-konteineriks), annab see elemendile käsu mitte luua oma uusi radade loendeid. Selle asemel laenab ja võtab see üle gridi rajad oma otseselt vanemalt.

Mis on Subgrid tehniliselt?

Sisuliselt loob Subgrid otseühenduse pesastatud gridi ja selle vanem-gridi vahel. Pesastatud gridist saab osaleja vanema gridi vormindamise kontekstis määratud mõõtmes (read, veerud või mõlemad). Subgridiga elemendi laps-elemente saab seejärel paigutada sellele päritud gridile, võimaldades neil joonduda teiste elementidega, mis asuvad väljaspool nende vahetut vanemat, kuid sama peamise gridi sees.

Põhiline järeldus on see: Subgrid ei defineeri oma radu; see kasutab oma vanema omi.

Võtmesõna `subgrid`: Süntaks ja kasutus

Süntaks on kaunilt lihtne. Kasutate võtmesõna `subgrid` väärtusena `grid-template-columns`, `grid-template-rows` või mõlema jaoks elemendil, mis on nii grid-element kui ka grid-konteiner.

Oletame, et laps-element `.nested-grid` on element `.parent-grid` sees. Et muuta see subgridiks:

            .parent-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Vanema radade näide */
  grid-template-rows: 100px auto 200px; /* Vanema radade näide */
}

.nested-grid {
  /* See element peab hõlmama radu, mida ta soovib kasutada */
  grid-column: 1 / 4; /* Hõlmab kõiki 3 vanema veergu */
  grid-row: 2 / 3; /* Asub vanema teises reas */

  /* Nüüd aktiveerime subgridi */
  display: grid;
  grid-template-columns: subgrid; /* Pärib vanemalt 3 veeru rada */
  grid-template-rows: subgrid; /* Pärib vanemalt ühe 'auto' rea raja */
}

            

              
                Copy
              
            
          

Oluline punkt, mida meeles pidada: et subgrid saaks radu pärida, peab see esmalt need hõivama. Ülaltoodud näites hõlmab `.nested-grid` kõiki oma vanema kolme veergu. Seetõttu, kui me seame `grid-template-columns: subgrid;`, saab see juurdepääsu neile samale kolmele rajale. Selle enda lapsi saab nüüd paigutada, kasutades vanema veergude gridi jooni 1 kuni 4.

Brauseritugi ja progressiivne täiustamine

Selle kirjutamise hetkel on Subgridil tugev tugi kaasaegsetes brauserites, sealhulgas Firefoxis, Chrome'is, Edge'is ja Safaris. See teeb sellest elujõulise tööriista globaalsele kasutajaskonnale suunatud tootmisveebisaitide jaoks. Siiski, nagu iga kaasaegse CSS-funktsiooni puhul, on mõistlik arvestada vanemate brauserite kasutajatega.

Progressiivne täiustamine on siin ideaalne strateegia. Saame kasutada CSS-is `@supports` at-reeglit, et pakkuda kindlat varupaigutust brauseritele, mis ei mõista Subgridi, ja seejärel rakendada Subgridil põhinevat paigutust neile, mis seda toetavad.

            /* --- Varulahendus vanematele brauseritele --- */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Hea flex-varulahendus */
}


/* --- Subgridi täiustus kaasaegsetele brauseritele --- */
@supports (grid-template-rows: subgrid) {
  .card {
    display: grid;
    grid-template-rows: subgrid; /* Tühista flex-kuvamine */
    grid-row: span 3; /* Eeldab, et vanem-gridil on 3 rida päise, sisu ja jaluse jaoks */
  }
}

            

              
                Copy
              
            
          

See lähenemine tagab funktsionaalse ja vastuvõetava kogemuse kõigile, pakkudes samal ajal enamikule kaasaegsete brauserite kasutajatele paremat, täiuslikult joondatud paigutust.

Praktiline süvaülevaade: Subgrid tegevuses

Teooria on oluline, kuid Subgridi võimsus saab tõeliselt selgeks, kui näha seda lahendamas reaalseid probleeme. Vaatame uuesti meie kaardikomponendi näidet ja parandame selle Subgridiga.

Näide 1: Täiuslikult joondatud kaardikomponent

Meie eesmärk on panna kaartide päised, sisualad ja jalused joonduma üle kõikide kaartide, luues puhtad horisontaalsed jooned, sõltumata sisu pikkusest.

Esmalt peame kohandama oma vanem-gridi. Veergude defineerimise asemel defineerime ka read, mis vastavad meie kaartide soovitud jaotistele (päis, kere, jalus).

Uus HTML (muudatusi pole vaja):

            <div class="card-container">
  <!-- Kaardid lähevad siia, samamoodi nagu enne -->
</div>
            

              
                Copy
              
            
          

Uus CSS (Subgridiga):

            .card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Defineeri read meie kaardi struktuuri jaoks */
  grid-template-rows: auto 1fr auto; /* Rida päistele, paindlik kere, rida jalustele */
  gap: 20px;
}

.card {
  border: 1px solid #ccc;
  padding: 15px;

  /* --- Subgridi maagia --- */
  display: grid;
  /* Kaart ise peab hõlmama kõiki ridu, mida see kasutab */
  grid-row: 1 / 4; /* Hõlma kõik kolm rida, mis on vanemas defineeritud */
  /* Nüüd päri need read */
  grid-template-rows: subgrid;
}

/* Paiguta kaardi lapsed päritud vanem-gridile */
.card h3 {
  grid-row: 1; /* Paiguta vanema gridi esimesse ritta */
}

.card p {
  grid-row: 2; /* Paiguta teise (paindlikku) ritta */
}

.card button {
  grid-row: 3; /* Paiguta kolmandasse ritta */
  align-self: end; /* Valikuline: joonda selle rea piires alla */
}

            

              
                Copy
              
            
          

Mis just juhtus?

1. `.card-container` defineerib nüüd kolmerealise gridi: üks `auto`-suurusega päiste jaoks, üks `1fr` paindlik rida põhisisu jaoks ja teine `auto`-suurusega rida nuppude jaoks.
2. Igale `.card` elemendile on öeldud, et see peab hõlmama kõiki neid kolme rida (`grid-row: 1 / 4`).
3. Otsustavalt seadsime `.card` elemendile `display: grid` ja `grid-template-rows: subgrid`. See ütleb kaardile, "Ära loo oma ridu. Kasuta neid kolme rida, mida sa oma vanemalt hõlmad."
4. Nüüd paigutatakse `h3`, `p` ja `button` iga kaardi sees samale jagatud gridile. Esimese kaardi `h3` on samas reas kui teise kaardi `h3`. Esimese kaardi `button` on samas reas kui teise kaardi nupp. Tulemus? Täiuslik horisontaalne joondus üle kogu komponendi.

See on revolutsiooniline muutus. Oleme saavutanud keerulise joondamise eesmärgi lihtsa, deklaratiivse CSS-iga, ilma häkkideta ja säilitades puhta, semantilise HTML-struktuuri.

Näide 2: Vormiväljade joondamine keerukas paigutuses

Vormid on veel üks valdkond, kus joondus on puhta kasutajakogemuse jaoks kriitilise tähtsusega. Kujutage ette lehe osa, mis on grid-element, ja selle osa sees on vorm siltide ja sisendväljadega, mida soovite joondada teiste lehel olevate elementidega.

HTML struktuur:

            <div class="page-layout">
  <aside>... külgriba sisu ...</aside>
  <main>
    <h1>Profiili seaded</h1>
    <form class="profile-form">
      <label for="name">Täisnimi</label>
      <input type="text" id="name" />
      <label for="email">E-posti aadress</label>
      <input type="email" id="email" />
      <label for="country">Riik/Regioon</label>
      <input type="text" id="country" />
    </form>
  </main>
</div>
            

              
                Copy
              
            
          

CSS veergudega Subgridi abil:

            .page-layout {
  display: grid;
  /* Levinud paigutus: külgriba, põhiosa kahe alamveeruga */
  grid-template-columns: 200px [main-start] 150px 1fr [main-end];
  gap: 30px;
}

main {
  grid-column: main-start / main-end; /* Hõlma kaks põhiosa veergu */
  display: grid;
  /* See on võti: päri vanema veerud */
  grid-template-columns: subgrid;
  /* Saame defineerida oma ridu vastavalt vajadusele */
  grid-auto-rows: min-content;
  align-content: start;
}

main h1 {
  /* Lase pealkirjal hõlmata mõlemad päritud veerud */
  grid-column: 1 / 3;
}

.profile-form {
  /* See vorm on samuti grid-element 'main' sees */
  grid-column: 1 / 3;
  display: grid;
  /* Ja me teeme SELLEST ka subgridi! */
  grid-template-columns: subgrid;
  gap: 15px;
  grid-auto-rows: min-content;
}

/* Nüüd paiguta sildid ja sisendid päritud lehe-taseme gridile */
.profile-form label {
  grid-column: 1; /* Joonda esimese veeruga (150px .page-layout'ist) */
  text-align: right;
}

.profile-form input {
  grid-column: 2; /* Joonda teise veeruga (1fr .page-layout'ist) */
}

            

              
                Copy
              
            
          

Selles edasijõudnud näites on meil pesastatud subgrid. `main` element muutub subgridiks, et pärida veergude rajad `.page-layout`'ilt. Seejärel muutub ka selle sees olev `form` subgridiks, pärides uuesti needsamad rajad. See võimaldab vormi sildid ja sisendid paigutada otse peamisele lehe-gridile, tagades nende täiusliku joonduse üldise lehe struktuuriga, mis on defineeritud kõige ülemises konteineris. Selline kompositsiooniline kontrollitase oli varem puhta CSS-iga kujuteldamatu.

Subgrid ridadele ja veergudele: ühemõõtmeline vs. kahemõõtmeline pärimine

Te ei pea kasutama Subgridi mõlema telje jaoks korraga. Saate valida, kas pärida rajad ainult veergudele, ainult ridadele või mõlemale. See annab peeneteralise kontrolli oma paigutuste üle.

Veergudel põhinevad subgridid: `grid-template-columns: subgrid;`

See on ideaalne elementide horisontaalseks joondamiseks üle komponentide, nagu eelmises vormi näites. Kui kasutate `grid-template-columns: subgrid;`, peate ikkagi defineerima oma rea rajad standardväärtustega nagu `auto`, `1fr` või piksliväärtustega (nt `grid-template-rows: auto 1fr;`). Pesastatud grid pärib veerud, kuid vastutab oma ridade suuruse ja arvu eest.

Ridadel põhinevad subgridid: `grid-template-rows: subgrid;`

See on täiuslik elementide vertikaalseks joondamiseks, nagu me tegime kaardikomponendi näites. See on suurepärane tagamaks, et erinevate komponentide horisontaalsed osad joonduksid. Kasutades `grid-template-rows: subgrid;`, peate defineerima oma veergude rajad (nt `grid-template-columns: 1fr 1fr;`).

Mõlema kombineerimine: täielik pärimine

Kui seate nii `grid-template-columns: subgrid;` kui ka `grid-template-rows: subgrid;`, muutub pesastatud grid oma määratud alal vanem-gridi tõeliseks proksiks. See ei defineeri ühtegi oma rada. See on võimas komponentide jaoks, mis peavad olema rangelt piiratud vanem-gridi osaga, võimaldades samal ajal nende lastel täielikku vabadust paigutuda sellele päritud gridi struktuurile.

Mõelge näiteks armatuurlaua vidinale. Vidin ise võib hõlmata 3 veergu ja 2 rida peamisest armatuurlaua gridist. Tehes vidinast täieliku subgridi, saab vidina sees olevaid elemente (nagu graafiku pealkiri, graafik ise ja legend) paigutada täpselt nendele 3 veerule ja 2 reale, joondudes kõrvalasuvate vidinate elementidega.

Edasijõudnud kontseptsioonid ja nüansid

Mida mugavamaks te Subgridiga muutute, seda enam kohtate selle peenemaid ja võimsamaid aspekte.

Subgrid ja `gap`

Vanem-gridi `gap`-omadus päritakse subgridi poolt. Radade vaheline ruum on osa gridi definitsioonist. Tavaliselt on see see, mida soovite, kuna see säilitab ühtlase vahe kogu paigutuses. Siiski saate määrata `gap` ka subgridi konteinerile endale. See lisandub päritud vahele, mis on käitumine, millest tuleb teadlik olla. Enamikul juhtudel soovite `gap` defineerida vanem-gridil ja lasta subgridil see pärida täiusliku järjepidevuse tagamiseks.

Suuruse määramine ja hõlmamine Subgridi kontekstis

See on üks võimsamaid funktsioone. Kui paigutate elemendi subgridi sisse ja käsite sellel hõlmata mitu rada (nt `grid-column: span 2;`), hõlmab see algse vanem-gridi radu. See ei hõlma kahte rada subgridi konteinerist; see hõlmab kahte rada, mille subgrid päris.

See võimaldab uskumatut kompositsioonilist paindlikkust. Sügaval DOM-puus asuva elemendi saab panna joonduma ja hõlmama kõrgetasemelise lehe struktuuri, murdes kontrollitud ja ennustataval viisil välja oma vahetu konteineri visuaalsetest piiridest. See on fantastiline dünaamiliste, ajakirjastiilis paigutuste loomiseks, kus pilt võib hõlmata mitut peamise artikli gridi veergu, isegi kui see on pesastatud `figure` elemendi sees.

Juurdepääsetavuse kaalutlused

Üks CSS Gridi suuri eeliseid, mis laieneb ka Subgridile, on lähtekoodi järjekorra eraldamine visuaalsest esitlusest. Subgridiga saate säilitada loogilise ja juurdepääsetava HTML-dokumendi struktuuri (nt pealkiri, millele järgneb selle sisu), kasutades samal ajal gridi keerukama või loomingulisema visuaalse paigutuse saavutamiseks.

Kuna Subgrid aitab teil vältida paigutuse häkke, viib see sageli puhtama HTML-ini. Ekraanilugeja läbib loogilise dokumendi, samal ajal kui visuaalne kasutaja näeb täiuslikult joondatud disaini. Näiteks meie kaardipaigutuses jääb iga kaardi HTML iseseisvaks, loogiliseks üksuseks (`h3` -> `p` -> `button`). Subgrid lihtsalt koordineerib nende üksuste vahelist visuaalset joondust ilma dokumendi voogu muutmata, mis on suur võit juurdepääsetavuse seisukohalt ja kaasaegse veebiarenduse põhiprintsiip.

CSS paigutuse tulevik: Subgridi koht ökosüsteemis

Subgrid ei asenda Flexboxi ega tavalist CSS Gridi. See on võimas täiustus, mis täidab spetsiifilise ja olulise lünga. Kaasaegne CSS-i paigutuse ökosüsteem seisneb õige tööriista kasutamises õigel otstarbel:

• Flexbox: Parim ühemõõtmeliste paigutuste jaoks, ruumi jaotamiseks mööda ühte telge ja elementide joondamiseks konteineris. Ideaalne navigeerimisribade, nuppude gruppide ja lihtsate komponentide siseosade jaoks.
• CSS Grid: Parim kahemõõtmeliste lehe-taseme paigutuste jaoks, luues seoseid ridade ja veergude vahel. Teie üldise lehe struktuuri alus.
• CSS Subgrid: Sild pesastatud komponentide ja peamise lehe-gridi vahel. See on tööriist, mille poole pöördute, kui grid-elemendi sees olevad elemendid peavad joonduma elementidega, mis on sellest väljaspool.

Tulevikku vaadates töötab Subgrid kaunilt koos teiste kaasaegsete CSS-i funktsioonidega, nagu Container Queries. Teil võib olla komponent, mis võtab kasutusele subgrid-paigutuse, kui selle konteiner on lai, kuid virnastub lihtsaks plokk- või flex-paigutuseks kitsas konteineris. See kombinatsioon makrotasandi paigutusest (Grid), komponendi tasandi joondusest (Subgrid) ja konteineriteadlikust reageerivusest (Container Queries) annab esirakenduse arendajatele uskumatult võimsa ja väljendusrikka tööriistakomplekti järgmise põlvkonna veebiliideste ehitamiseks.

Kokkuvõte: Võtke omaks joondatud kompositsiooni jõud

CSS Subgrid on rohkem kui lihtsalt uus funktsioon; see on paradigma muutus selles, kuidas me saame veebis keerukaid paigutusi luua. See lahendab pikaajalise probleemi elegantse ja intuitiivse lahendusega, edendades puhtamat koodi, hooldatavamaid stiililehti ja visuaalselt täiuslikke disaine.

Lubades pesastatud grididel osaleda oma vanemate paigutuses, annab Subgrid meile võimaluse:

• Saavutada täiuslik joondus: Tagada, et eraldiseisvate komponentide elemendid joonduksid veatult ilma häkkide või JavaScriptita.
• Kirjutada DRY-emat koodi: Defineerige oma peamine gridi struktuur üks kord ja laske pesastatud elementidel see pärida, vältides korduvaid radade definitsioone.
• Parandada hooldatavust: Paigutuse loogika on tsentraliseeritud vanem-gridi, muutes uuendused ja reageerivad kohandused palju lihtsamaks.
• Täiustada juurdepääsetavust: Looge keerukaid visuaalseid paigutusi, säilitades samal ajal loogilise ja semantilise lähtekoodi järjekorra.

Laia brauseritoega on nüüd ideaalne aeg arendajatele ja disaineritele üle maailma Subgrid oma töövoogu lisada. Alustage komponentide tuvastamisest, mis võiksid kasu saada elementideülesest joondusest, katsetage rea- ja veerupärimisega ning kogege rahulolu, ehitades paigutusi, mis on kapoti all sama robustsed ja loogilised, kui nad on ekraanil kaunid. Kompromiteeritud pesastatud paigutuste ajastu on läbi; täiustatud, joondatud kompositsiooni ajastu on tõeliselt alanud.