CSS Subgrid lygiavimas: įdėtųjų tinklinių maketų paveldėjimo valdymas

CSS Subgrid yra galinga funkcija, kuri praplečia CSS Grid Layout galimybes, leisdama kurti sudėtingesnes ir lankstesnes įdėtąsias tinklelio struktūras. Ji leidžia tinklelio elementui paveldėti savo pirminio tinklelio takelių apibrėžimus, suteikdama neprilygstamą lygiavimo ir tarpų kontrolę įdėtuosiuose maketuose. Šiame straipsnyje gilinsimės į CSS Subgrid subtilybes, nagrinėsime jo privalumus, naudojimo atvejus ir praktinį įgyvendinimą su kodo pavyzdžiais. Aptarsime viską nuo pagrindinių koncepcijų iki pažangių technikų, suteikdami jums galimybę pasinaudoti Subgrid kuriant sudėtingus ir adaptyvius dizainus.

CSS Grid Layout supratimas: pagrindas Subgrid

Prieš gilinantis į Subgrid, būtina gerai suprasti CSS Grid Layout. Grid Layout yra dvimatė maketavimo sistema, leidžianti padalinti konteinerį į eilutes ir stulpelius, išdėstant elementus gautose tinklelio langeliuose. Ji siūlo galingus įrankius elementų dydžio, padėties ir lygiavimo valdymui.

Štai pagrindinis CSS Grid konteinerio pavyzdys:

            .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
              
            
          

Šiame pavyzdyje sukūrėme tinklelio konteinerį su trimis vienodo pločio stulpeliais (1fr) ir dviem automatinio aukščio eilutėmis. gap savybė prideda tarpus tarp tinklelio elementų.

Pristatome CSS Subgrid: tinklelio galimybių išplėtimas

Subgrid remiasi CSS Grid pagrindu, leisdamas įdėtajam tinkleliui paveldėti savo pirminio tinklelio takelių apibrėžimus (eilutes ir stulpelius). Tai reiškia, kad galite lyginti elementus įdėtajame tinklelyje su išorinio tinklelio takeliais, sukurdami vientisą ir vizualiai nuoseklų maketą. Tai ypač naudinga sudėtingiems maketams, kur elementai turi apimti kelias eilutes ar stulpelius.

Pagrindiniai CSS Subgrid naudojimo privalumai:

• Patobulintas lygiavimas: Subgrid užtikrina tikslų įdėtųjų tinklelio elementų ir pirminio tinklelio takelių lygiavimą.
• Sumažintas sudėtingumas: Supaprastina sudėtingus maketus, leisdamas apibrėžti takelių dydžius ir pozicijas pirminiame tinklelyje ir juos paveldėti subgrid tinklelyje.
• Pagerintas adaptyvumas: Palengvina adaptyvųjį dizainą, leisdamas subgrid tinkleliams prisitaikyti prie savo pirminio tinklelio dydžio ir formos.
• Palaikomumas: Pagerina kodo palaikomumą centralizuojant takelių apibrėžimus pirminiame tinklelyje.

CSS Subgrid įgyvendinimas: praktinis vadovas

Norėdami įgyvendinti Subgrid, turite deklaruoti tinklelio elementą kaip subgrid, nustatydami grid-template-columns ir (arba) grid-template-rows savybes į subgrid. Tai nurodo naršyklei paveldėti takelių apibrėžimus iš pirminio tinklelio.

Pavyzdys: pagrindinio Subgrid maketo kūrimas

Panagrinėkime scenarijų, kai turime pagrindinį tinklelio maketą su trimis stulpeliais ir dviem eilutėmis. Norime sukurti subgrid viename iš tinklelio elementų, kuris būtų lygus su pagrindinio tinklelio stulpeliais.

            <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
              
            
          

Dabar pridėkime 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
              
            
          

Šiame pavyzdyje .subgrid-container yra subgrid, kuris paveldi stulpelių takelius iš .grid-container. Naudojame `grid-column: 1 / -1;` ant `.subgrid-container`, kad užtikrintume, jog jis apima visą `.grid-item.item5` plotį, kas užtikrina, kad subgrid bus lygus su pirminio tinklelio stulpeliais. Subgrid elementai automatiškai bus lygiuojami su pirminiame tinklelyje apibrėžtais stulpeliais.

Aiškus takelių dydžio nustatymas su pavadintomis tinklelio linijomis

Sudėtingesniems maketams galbūt norėsite aiškiai apibrėžti takelių dydžius ir naudoti pavadintas tinklelio linijas. Tai suteikia daugiau kontrolės ir aiškumo jūsų kode.

            .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
              
            
          

Čia mes apibrėžėme pavadintas tinklelio linijas (col-start, col-mid, col-end, row-start, row-mid, row-end) pirminiame tinklelyje. Subgrid paveldi šias pavadintas linijas, leisdamas jums pozicionuoti elementus subgrid tinklelyje naudojant šiuos pavadinimus.

Pažangios Subgrid technikos

Takelių apėmimas Subgrid tinklelyje

Taip pat galite apimti takelius subgrid tinklelyje, kaip ir įprastame tinklelyje. Tai leidžia kurti elementus, kurie užima kelias eilutes ar stulpelius subgrid tinklelyje.

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

              
                Copy
              
            
          

Tai privers elementą apimti du stulpelius ir dvi eilutes subgrid tinklelyje.

grid-auto-flow naudojimas su Subgrid

grid-auto-flow savybė kontroliuoja, kaip automatiškai išdėstomi elementai įterpiami į tinklelį. Ji gali būti naudojama su subgrid, norint kontroliuoti kryptį, kuria išdėstomi elementai.

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

            

              
                Copy
              
            
          

row dense reikšmė privers elementus užpildyti bet kokius tarpus eilutėse, o column dense reikšmė užpildys tarpus stulpeliuose.

Numanomų takelių valdymas Subgrid tinklelyje

Jei subgrid elementas yra patalpintas už aiškiai apibrėžtų takelių, bus sukurti numanomi takeliai. Galite kontroliuoti šių numanomų takelių dydį naudodami grid-auto-rows ir grid-auto-columns savybes.

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

            

              
                Copy
              
            
          

Tai užtikrins, kad bet kurios numanomai sukurtos eilutės turės minimalų 100px aukštį ir automatiškai prisitaikys prie turinio dydžio.

Realaus pasaulio CSS Subgrid naudojimo atvejai

CSS Subgrid yra ypač naudingas kuriant sudėtingus maketus įvairiuose realaus pasaulio scenarijuose:

• Formų maketai: Formų etikečių ir įvesties laukų lygiavimas pagal nuoseklią tinklelio struktūrą. Įsivaizduokite daugiakalbę formą, kurioje etikečių ilgis skiriasi. Subgrid gali užtikrinti, kad įvesties laukai visada būtų sulygiuoti, nepriklausomai nuo etiketės ilgio.
• Produktų sąrašai: Vizualiai patrauklių produktų sąrašų kūrimas su nuosekliu paveikslėlių, pavadinimų ir aprašymų lygiavimu. Apsvarstykite el. prekybos platformą, parduodančią produktus iš skirtingų šalių. Subgrid gali padėti išlaikyti nuoseklų produktų detalių lygiavimą, nepaisant produktų pavadinimų ar aprašymų ilgio skirtumų.
• Valdymo skydelių sąsajos: Sudėtingų valdymo skydelių sąsajų kūrimas su keliais skydeliais ir valdikliais, kurie turi būti sulygiuoti vienas su kitu. Pagalvokite apie finansų valdymo skydelį, kuriame rodomos diagramos, lentelės ir pagrindiniai veiklos rodikliai. Subgrid užtikrina, kad visi elementai būtų tobulai sulygiuoti, sukuriant profesionalią ir patogią vartotojo patirtį.
• Žurnalų maketai: Žurnalo stiliaus maketų kūrimas su straipsniais, paveikslėliais ir antraštėmis, kurie turi būti sulygiuoti per kelis stulpelius. Pavyzdžiui, naujienų svetainė gali naudoti subgrid, kad išlaikytų nuoseklią tinklelio struktūrą skirtingose pagrindinio puslapio dalyse, nepriklausomai nuo turinio tipo.
• Kalendoriaus vaizdai: Kalendoriaus vaizdų įgyvendinimas, kai įvykiai turi būti sulygiuoti su konkrečiomis dienomis ir laikais.

Naršyklių palaikymas CSS Subgrid

Naršyklių palaikymas CSS Subgrid yra iš esmės geras šiuolaikinėse naršyklėse. Jis palaikomas Firefox, Chrome, Safari ir Edge. Tačiau visada verta patikrinti naujausias naršyklių suderinamumo lenteles svetainėse, tokiose kaip Can I use, kad užtikrintumėte palaikymą savo tikslinei auditorijai. Taip pat galite apsvarstyti galimybę naudoti progresyvaus tobulinimo technikas, kad pateiktumėte atsarginį variantą senesnėms naršyklėms.

Prieinamumo aspektai

Naudojant CSS Subgrid, svarbu atsižvelgti į prieinamumą. Užtikrinkite, kad maketas būtų logiškas ir naršomas vartotojams su negalia. Naudokite semantinius HTML elementus ir pateikite atitinkamus ARIA atributus, kad pagerintumėte prieinamumą. Išbandykite savo maketą su ekrano skaitytuvais ir naršymu klaviatūra, kad nustatytumėte ir išspręstumėte galimas problemas. Tinkamai sutvarkytas turinys HTML šaltinio kode yra labai svarbus ekrano skaitytuvų naudotojams. Nesikliaukite vien vizualiu išdėstymu informacijai perteikti.

CSS Subgrid palyginimas su tradicinėmis maketavimo technikomis

Palyginti su tradicinėmis maketavimo technikomis, tokiomis kaip float ir flexbox, CSS Subgrid siūlo keletą privalumų:

• Dvimatės išdėstymas: Subgrid yra sukurtas dvimačiams maketams, o flexbox pirmiausia skirtas vienmačiams maketams.
• Lygiavimo kontrolė: Subgrid suteikia tikslesnę lygiavimo kontrolę tarp įdėtųjų tinklelio elementų ir pirminio tinklelio takelių.
• Sumažintas sudėtingumas: Subgrid gali supaprastinti sudėtingus maketus, leisdamas apibrėžti takelių dydžius ir pozicijas pirminiame tinklelyje ir juos paveldėti subgrid tinklelyje.

Nors flexbox puikiai tinka elementams išdėstyti vienoje eilutėje ar stulpelyje, Subgrid išsiskiria kuriant sudėtingus, dvimačius maketus su tiksliu lygiavimu.

Patarimai ir geriausios praktikos naudojant CSS Subgrid

• Pradėkite nuo aiškaus plano: Prieš įgyvendindami Subgrid, atidžiai suplanuokite savo maketą ir nustatykite sritis, kuriose Subgrid gali suteikti daugiausiai naudos.
• Naudokite pavadintas tinklelio linijas: Pavadintos tinklelio linijos gali pagerinti jūsų kodo skaitomumą ir palaikomumą.
• Kruopščiai testuokite: Išbandykite savo maketą skirtingose naršyklėse ir įrenginiuose, kad užtikrintumėte suderinamumą ir adaptyvumą.
• Atsižvelkite į prieinamumą: Užtikrinkite, kad jūsų maketas būtų prieinamas vartotojams su negalia.
• Naudokite prasmingus klasių pavadinimus: Naudokite aiškius ir aprašomuosius klasių pavadinimus, kad pagerintumėte kodo skaitomumą ir palaikomumą. Pavyzdžiui, vietoj bendrinių pavadinimų, tokių kaip `item1` ar `container`, rinkitės pavadinimus, atspindinčius elemento turinį ar funkciją, pavyzdžiui, `product-image` ar `navigation-menu`. Tai palengvina supratimą apie kiekvieno elemento paskirtį ir kodo modifikavimą ateityje.
• Dokumentuokite savo kodą: Pridėkite komentarus prie savo CSS ir HTML, kad paaiškintumėte skirtingų sekcijų paskirtį ir kaip jos veikia kartu. Tai ypač naudinga sudėtingiems maketams, kuriuos gali būti sunku suprasti iš pirmo žvilgsnio. Gerai dokumentuotas kodas palengvina kitiems programuotojams (arba jums patiems ateityje) maketo palaikymą ir modifikavimą.

CSS Subgrid maketų derinimas

CSS Subgrid maketų derinimas kartais gali būti sudėtingas. Štai keletas patarimų, padėsiančių išspręsti dažniausiai pasitaikančias problemas:

• Naudokite naršyklės kūrėjo įrankius: Naršyklės kūrėjo įrankiai suteikia galingas funkcijas CSS Grid ir Subgrid maketų tikrinimui. Galite vizualizuoti tinklelio linijas, takelių dydžius ir elementų pozicijas.
• Tikrinkite klaidas konsolėje: Ieškokite bet kokių CSS klaidų ar įspėjimų naršyklės konsolėje.
• Supaprastinkite maketą: Jei kyla problemų su sudėtingu maketu, pabandykite jį supaprastinti, kad išskirtumėte probleminę sritį.
• Patvirtinkite savo CSS: Naudokite CSS validatorių, kad patikrintumėte sintaksės klaidas ir kitas problemas.
• Tikrinkite apskaičiuotus stilius: Naudokite naršyklės kūrėjo įrankių skirtuką „Computed“ (Apskaičiuota), kad ištirtumėte galutinius apskaičiuotus stilius, pritaikytus kiekvienam elementui, įskaitant paveldėtus stilius.

Išvada: pasinaudojant CSS Subgrid galia

CSS Subgrid yra vertingas įrankis kuriant sudėtingus ir adaptyvius įdėtuosius tinklelio maketus. Suprasdami jo funkcijas ir privalumus, galite pasinaudoti Subgrid, kad pagerintumėte savo tinklalapių dizaino įgūdžius ir kurtumėte sudėtingesnes bei vizualiai patrauklesnes svetaines. Nesvarbu, ar kuriate formų maketus, produktų sąrašus, ar valdymo skydelių sąsajas, Subgrid suteikia lankstumo ir kontrolės, reikalingos kuriant pikselių tikslumo maketus. Tobulėjant naršyklių palaikymui, Subgrid taps esmine kiekvieno front-end programuotojo įrankių rinkinio dalimi.

Eksperimentuokite su šiame straipsnyje pateiktais pavyzdžiais ir tyrinėkite įvairias CSS Subgrid funkcijas. Su praktika galėsite įvaldyti Subgrid ir kurti stulbinančius tinklalapių maketus, kurie yra ir funkcionalūs, ir vizualiai patrauklūs. Apsvarstykite galimybę prisidėti prie atvirojo kodo projektų, kurie naudoja CSS Grid ir Subgrid, kad toliau tobulintumėte savo įgūdžius ir supratimą apie šią technologiją.

Papildomi ištekliai

• MDN Web Docs: CSS Subgrid maketas
• CSS Grid Layout modulis, 2 lygis
• Can I use: CSS Subgrid