CSS Subgrid izlīdzināšana: Iegulto režģa izkārtojumu mantošanas apgūšana

CSS Subgrid ir jaudīga funkcija, kas paplašina CSS Grid Layout iespējas, ļaujot jums izveidot sarežģītākas un elastīgākas iegulto režģu struktūras. Tā ļauj režģa elementam mantot sava vecākā režģa celiņu definīcijas, nodrošinot nepārspējamu kontroli pār izlīdzināšanu un atstarpēm iegultajos izkārtojumos. Šis raksts iedziļināsies CSS Subgrid sarežģītībās, izpētot tā priekšrocības, lietošanas gadījumus un praktisko ieviešanu ar kodu piemēriem. Mēs aplūkosim visu, sākot no pamatjēdzieniem līdz progresīvām tehnikām, sniedzot jums iespēju izmantot Subgrid, lai radītu izsmalcinātus un adaptīvus dizainus.

Izpratne par CSS Grid Layout: Pamats Subgrid

Pirms iedziļināties Subgrid, ir būtiski labi izprast CSS Grid Layout. Grid Layout ir divdimensiju izkārtojuma sistēma, kas ļauj sadalīt konteineru rindās un kolonnās, izvietojot elementus rezultātā izveidotajās režģa šūnās. Tā piedāvā jaudīgus rīkus elementu izmēra, pozīcijas un izlīdzināšanas kontrolei.

Šeit ir pamata piemērs CSS Grid konteineram:

            .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
              
            
          

Šajā piemērā mēs esam izveidojuši režģa konteineru ar trīs vienāda platuma kolonnām (1fr) un divām rindām ar automātisku augstumu. Īpašība gap pievieno atstarpi starp režģa elementiem.

Iepazīstinām ar CSS Subgrid: Režģa iespēju paplašināšana

Subgrid balstās uz CSS Grid pamatiem, ļaujot iegultam režģim mantot sava vecākā režģa celiņu definīcijas (rindas un kolonnas). Tas nozīmē, ka jūs varat izlīdzināt elementus iegultajā režģī ar ārējā režģa celiņiem, radot saskaņotu un vizuāli konsekventu izkārtojumu. Tas ir īpaši noderīgi sarežģītiem izkārtojumiem, kur elementiem jāaptver vairākas rindas vai kolonnas.

Galvenās CSS Subgrid izmantošanas priekšrocības:

• Uzlabota izlīdzināšana: Subgrid nodrošina precīzu izlīdzināšanu starp iegultajiem režģa elementiem un vecākā režģa celiņiem.
• Samazināta sarežģītība: Vienkāršo sarežģītus izkārtojumus, ļaujot definēt celiņu izmērus un pozīcijas vecākajā režģī un mantot tos apakšrežģī.
• Uzlabota adaptivitāte: Atvieglo adaptīvā dizaina izveidi, ļaujot apakšrežģiem pielāgoties to vecākā režģa izmēram un formai.
• Uzturamība: Uzlabo koda uzturamību, centralizējot celiņu definīcijas vecākajā režģī.

CSS Subgrid ieviešana: Praktiska rokasgrāmata

Lai ieviestu Subgrid, jums jādeklarē režģa elements kā apakšrežģis, iestatot grid-template-columns un/vai grid-template-rows īpašības uz subgrid. Tas norāda pārlūkprogrammai mantot celiņu definīcijas no vecākā režģa.

Piemērs: Pamata Subgrid izkārtojuma izveide

Apskatīsim scenāriju, kurā mums ir galvenais režģa izkārtojums ar trīs kolonnām un divām rindām. Mēs vēlamies izveidot apakšrežģi vienā no režģa elementiem, kas izlīdzinās ar galvenā režģa kolonnām.

            <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
              
            
          

Tagad pievienosim CSS:

            .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; /* Enables grid layout for this item */
}

.subgrid-container {
  display: grid;
  grid-column: 1 / -1; /* Span all columns of the parent grid item */
  grid-template-columns: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

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

              
                Copy
              
            
          

Šajā piemērā .subgrid-container ir apakšrežģis, kas manto kolonnu celiņus no .grid-container. Mēs izmantojam `grid-column: 1 / -1;` uz .subgrid-container, lai nodrošinātu, ka tas aptver visu .grid-item.item5 platumu, kas nodrošina apakšrežģa izlīdzināšanu ar vecākā režģa kolonnām. Apakšrežģa elementi automātiski izlīdzināsies ar kolonnām, kas definētas vecākajā režģī.

Eksplicīta celiņu izmēru noteikšana ar nosauktām režģa līnijām

Sarežģītākiem izkārtojumiem jūs, iespējams, vēlēsities eksplicīti definēt celiņu izmērus un izmantot nosauktas režģa līnijas. Tas nodrošina lielāku kontroli un skaidrību jūsu kodā.

            .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; /* Span all columns of the parent grid item */
  grid-template-columns: subgrid [col-start] [col-mid] [col-end];
  grid-template-rows: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

            

              
                Copy
              
            
          

Šeit mēs esam definējuši nosauktas režģa līnijas (col-start, col-mid, col-end, row-start, row-mid, row-end) vecākajā režģī. Apakšrežģis manto šīs nosauktās līnijas, ļaujot jums pozicionēt elementus apakšrežģī, izmantojot šos nosaukumus.

Progresīvas Subgrid tehnikas

Celiņu aptveršana Subgrid

Jūs varat arī aptvert celiņus apakšrežģī, tāpat kā parastā režģī. Tas ļauj jums izveidot elementus, kas aizņem vairākas rindas vai kolonnas apakšrežģī.

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

              
                Copy
              
            
          

Tas liks elementam aptvert divas kolonnas un divas rindas apakšrežģī.

grid-auto-flow izmantošana ar Subgrid

Īpašība grid-auto-flow kontrolē, kā automātiski izvietotie elementi tiek ievietoti režģī. To var izmantot ar apakšrežģi, lai kontrolētu virzienu, kurā elementi tiek izvietoti.

            .subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-flow: row dense; /* Example value */
}

            

              
                Copy
              
            
          

Vērtība row dense liks elementiem aizpildīt jebkuras spraugas rindās, savukārt vērtība column dense aizpildīs spraugas kolonnās.

Netiešo celiņu apstrāde Subgrid

Ja apakšrežģa elements tiek novietots ārpus eksplicīti definētajiem celiņiem, tiks izveidoti netiešie celiņi. Jūs varat kontrolēt šo netiešo celiņu izmēru, izmantojot īpašības grid-auto-rows un grid-auto-columns.

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

            

              
                Copy
              
            
          

Tas nodrošinās, ka jebkurām netieši izveidotajām rindām būs minimālais augstums 100 pikseļi un tās automātiski pielāgosies satura izmēram.

Reāli CSS Subgrid pielietojuma piemēri

CSS Subgrid ir īpaši noderīgs sarežģītu izkārtojumu izveidei dažādos reālos scenārijos:

• Formu izkārtojumi: Formu etiķešu un ievades lauku izlīdzināšana ar konsekventu režģa struktūru. Iedomājieties daudzvalodu formu, kurā etiķešu garums atšķiras. Subgrid var nodrošināt, ka ievades lauki vienmēr ir izlīdzināti, neatkarīgi no etiķetes garuma.
• Produktu saraksti: Vizuāli pievilcīgu produktu sarakstu izveide ar konsekventu attēlu, nosaukumu un aprakstu izlīdzināšanu. Apsveriet e-komercijas platformu, kas pārdod produktus no dažādām valstīm. Subgrid var palīdzēt uzturēt konsekventu produkta detaļu izlīdzināšanu, neskatoties uz atšķirībām produktu nosaukumu garumos vai aprakstos.
• Mērinstrumentu paneļu saskarnes: Sarežģītu mērinstrumentu paneļu saskarņu veidošana ar vairākiem paneļiem un logrīkiem, kuriem jābūt savstarpēji izlīdzinātiem. Padomājiet par finanšu mērinstrumentu paneli, kas attēlo diagrammas, tabulas un galvenos darbības rādītājus. Subgrid nodrošina, ka visi elementi ir perfekti izlīdzināti, radot profesionālu un lietotājam draudzīgu pieredzi.
• Žurnālu izkārtojumi: Žurnāla stila izkārtojumu projektēšana ar rakstiem, attēliem un parakstiem, kuriem jābūt izlīdzinātiem vairākās kolonnās. Ziņu vietne, piemēram, var izmantot subgrid, lai uzturētu konsekventu režģa struktūru dažādās mājaslapas sadaļās, neatkarīgi no satura veida.
• Kalendāra skati: Kalendāra skatu ieviešana, kur notikumiem jābūt izlīdzinātiem ar konkrētām dienām un laikiem.

Pārlūkprogrammu atbalsts CSS Subgrid

Pārlūkprogrammu atbalsts CSS Subgrid parasti ir labs visās modernajās pārlūkprogrammās. To atbalsta Firefox, Chrome, Safari un Edge. Tomēr vienmēr ir laba ideja pārbaudīt jaunākās pārlūkprogrammu saderības tabulas tādās vietnēs kā Can I use, lai nodrošinātu atbalstu jūsu mērķauditorijai. Jūs varat arī apsvērt progresīvās uzlabošanas tehniku izmantošanu, lai nodrošinātu rezerves risinājumu vecākām pārlūkprogrammām.

Pieejamības apsvērumi

Izmantojot CSS Subgrid, ir svarīgi ņemt vērā pieejamību. Pārliecinieties, ka izkārtojums ir loģisks un navigējams lietotājiem ar invaliditāti. Izmantojiet semantiskus HTML elementus un nodrošiniet atbilstošus ARIA atribūtus, lai uzlabotu pieejamību. Pārbaudiet savu izkārtojumu ar ekrāna lasītājiem un tastatūras navigāciju, lai identificētu un novērstu iespējamās problēmas. Pareizi sakārtots saturs HTML avotkodā ir būtisks ekrāna lasītāju lietotājiem. Nepaļaujieties tikai uz vizuālo izkārtojumu informācijas nodošanai.

CSS Subgrid salīdzinājumā ar tradicionālajām izkārtojuma tehnikām

Salīdzinot ar tradicionālajām izkārtojuma tehnikām, piemēram, floats un flexbox, CSS Subgrid piedāvā vairākas priekšrocības:

• Divdimensiju izkārtojums: Subgrid ir paredzēts divdimensiju izkārtojumiem, savukārt flexbox galvenokārt ir paredzēts viendimensijas izkārtojumiem.
• Izlīdzināšanas kontrole: Subgrid nodrošina precīzāku kontroli pār izlīdzināšanu starp iegultajiem režģa elementiem un vecākā režģa celiņiem.
• Samazināta sarežģītība: Subgrid var vienkāršot sarežģītus izkārtojumus, ļaujot definēt celiņu izmērus un pozīcijas vecākajā režģī un mantot tos apakšrežģī.

Kamēr flexbox ir lieliski piemērots elementu sakārtošanai vienā rindā vai kolonnā, Subgrid izceļas ar spēju veidot sarežģītus, divdimensiju izkārtojumus ar precīzu izlīdzināšanu.

Padomi un labākās prakses CSS Subgrid izmantošanai

• Sāciet ar skaidru plānu: Pirms Subgrid ieviešanas, rūpīgi izplānojiet savu izkārtojumu un identificējiet jomas, kurās Subgrid var sniegt vislielāko labumu.
• Izmantojiet nosauktas režģa līnijas: Nosauktas režģa līnijas var uzlabot jūsu koda lasāmību un uzturamību.
• Rūpīgi pārbaudiet: Pārbaudiet savu izkārtojumu dažādās pārlūkprogrammās un ierīcēs, lai nodrošinātu saderību un adaptivitāti.
• Apsveriet pieejamību: Pārliecinieties, ka jūsu izkārtojums ir pieejams lietotājiem ar invaliditāti.
• Lietojiet jēgpilnus klašu nosaukumus: Izmantojiet skaidrus un aprakstošus klašu nosaukumus, lai uzlabotu koda lasāmību un uzturamību. Piemēram, tā vietā, lai izmantotu vispārīgus nosaukumus, piemēram, `item1` vai `container`, izvēlieties nosaukumus, kas atspoguļo elementa saturu vai funkciju, piemēram, `product-image` vai `navigation-menu`. Tas atvieglo katra elementa mērķa izpratni un koda modificēšanu vēlāk.
• Dokumentējiet savu kodu: Pievienojiet komentārus savam CSS un HTML, lai paskaidrotu dažādu sadaļu mērķi un to, kā tās darbojas kopā. Tas ir īpaši noderīgi sarežģītiem izkārtojumiem, kurus var būt grūti saprast no pirmā acu uzmetiena. Labi dokumentēts kods atvieglo citiem izstrādātājiem (vai jums pašam nākotnē) izkārtojuma uzturēšanu un modificēšanu.

CSS Subgrid izkārtojumu atkļūdošana

CSS Subgrid izkārtojumu atkļūdošana dažkārt var būt sarežģīta. Šeit ir daži padomi, kas palīdzēs jums novērst bieži sastopamas problēmas:

• Izmantojiet pārlūkprogrammas izstrādātāju rīkus: Pārlūkprogrammas izstrādātāju rīki piedāvā jaudīgas funkcijas CSS Grid un Subgrid izkārtojumu pārbaudei. Jūs varat vizualizēt režģa līnijas, celiņu izmērus un elementu pozīcijas.
• Pārbaudiet kļūdas konsolē: Meklējiet jebkādas CSS kļūdas vai brīdinājumus pārlūkprogrammas konsolē.
• Vienkāršojiet izkārtojumu: Ja jums ir problēmas ar sarežģītu izkārtojumu, mēģiniet to vienkāršot, lai izolētu problēmu zonu.
• Validējiet savu CSS: Izmantojiet CSS validatoru, lai pārbaudītu sintakses kļūdas un citas problēmas.
• Pārbaudiet aprēķinātos stilus: Izmantojiet pārlūkprogrammas izstrādātāju rīku cilni "Computed", lai pārbaudītu gala aprēķinātos stilus, kas piemēroti katram elementam, ieskaitot mantotos stilus.

Noslēgums: CSS Subgrid spēka izmantošana

CSS Subgrid ir vērtīgs rīks sarežģītu un adaptīvu iegulto režģa izkārtojumu izveidei. Izprotot tā funkcijas un priekšrocības, jūs varat izmantot Subgrid, lai uzlabotu savas tīmekļa dizaina prasmes un veidotu sarežģītākas un vizuāli pievilcīgākas vietnes. Neatkarīgi no tā, vai jūs veidojat formu izkārtojumus, produktu sarakstus vai mērinstrumentu paneļu saskarnes, Subgrid nodrošina elastību un kontroli, kas nepieciešama, lai izveidotu pikseļu precīzus izkārtojumus. Tā kā pārlūkprogrammu atbalsts turpina uzlaboties, Subgrid ir gatavs kļūt par būtisku daļu no katra front-end izstrādātāja rīku komplekta.

Eksperimentējiet ar šajā rakstā sniegtajiem piemēriem un izpētiet dažādās CSS Subgrid funkcijas. Ar praksi jūs spēsiet apgūt Subgrid un izveidot satriecošus tīmekļa izkārtojumus, kas ir gan funkcionāli, gan vizuāli pievilcīgi. Apsveriet iespēju dot savu ieguldījumu atvērtā pirmkoda projektos, kas izmanto CSS Grid un Subgrid, lai vēl vairāk uzlabotu savas prasmes un izpratni par šo tehnoloģiju.

Papildu resursi

• MDN Web Docs: CSS Subgrid izkārtojums
• CSS Grid Layout Module Level 2
• Can I use: CSS Subgrid