CSS Subgrid takelių pavadinimai: paveldėtų tinklelio linijų identifikavimas lankstiems maketams

CSS Tinklelis (Grid) sukėlė revoliuciją interneto maketavime, suteikdamas neprilygstamą valdymą ir lankstumą. Pogrupio tinklelis (Subgrid) žengia dar vieną žingsnį į priekį, leisdamas įdėtiems tinkleliams paveldėti takelių dydžius iš savo pirminio tinklelio. Galinga, bet kartais nepastebima pogrupio tinklelio savybė yra takelių pavadinimai. Sujungus tai su būdingu pogrupio tinklelių paveldėjimu, gaunamas elegantiškas sprendimas sudėtingiems maketams ir prižiūrimam kodui.

CSS Tinklelio (Grid) ir Pogrupio tinklelio (Subgrid) supratimas

Prieš gilinantis į takelių pavadinimus, trumpai prisiminkime CSS Tinklelio (Grid) ir Pogrupio tinklelio (Subgrid) pagrindus.

CSS Tinklelis (Grid)

CSS Tinklelio maketas (Grid Layout) yra dvimatė maketavimo sistema, skirta internetui. Ji leidžia padalinti konteinerį į eilutes ir stulpelius, o tada išdėstyti turinį tuose tinklelio langeliuose. Pagrindinės sąvokos:

• Tinklelio konteineris (Grid Container): Elementas, kuriam taikomas `display: grid` arba `display: inline-grid`.
• Tinklelio elementai (Grid Items): Tiesioginiai tinklelio konteinerio vaikų elementai.
• Tinklelio takeliai (Grid Tracks): Tinklelio eilutės ir stulpeliai.
• Tinklelio linijos (Grid Lines): Numeruotos linijos, kurios atskiria tinklelio takelius.
• Tinklelio langeliai (Grid Cells): Atskiros sritys tinklelyje.

Pavyzdžiui, apsvarstykite šį HTML:

            <div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>
            

              
                Copy
              
            
          

Ir CSS:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
            

              
                Copy
              
            
          

Tai sukuria tinklelio konteinerį su trimis vienodo pločio stulpeliais ir dviem 100px aukščio eilutėmis.

CSS Pogrupio tinklelis (Subgrid)

Pogrupio tinklelis (Subgrid) leidžia tinklelio elementui pačiam tapti tinklelio konteineriu, paveldinčiu takelių dydžius iš savo pirminio tinklelio. Tai ypač naudinga kuriant nuoseklius maketus, kur įdėti elementai turi lygiuotis su pagrindiniu tinkleliu. Norėdami įjungti pogrupio tinklelį, nustatykite pogrupio tinklelio konteinerio `grid-template-columns` ir/arba `grid-template-rows` savybes į `subgrid`.

Išplėskime ankstesnį pavyzdį:

            <div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item subgrid-item">
    <div class="subgrid-content">Subgrid Content 1</div>
    <div class="subgrid-content">Subgrid Content 2</div>
  </div>
  <div class="grid-item">Item 3</div>
</div>
            

              
                Copy
              
            
          

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.subgrid-item {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subgrid-content {
  /* Styles for content within the subgrid */
}
            

              
                Copy
              
            
          

Dabar `.subgrid-item` paveldės stulpelių ir eilučių dydžius iš pirminio tinklelio, sklandžiai išlygindamas savo turinį.

Takelių pavadinimai CSS tinklelyje

Takelių pavadinimai suteikia būdą priskirti prasmingus pavadinimus tinklelio linijoms, todėl jūsų CSS tampa lengviau skaitomas ir prižiūrimas. Užuot nurodę tinklelio linijas pagal jų skaitinį indeksą, galite naudoti aprašomuosius pavadinimus. Tai labai pagerina kodo aiškumą, ypač sudėtinguose tinkleliuose.

Galite apibrėžti takelių pavadinimus `grid-template-columns` ir `grid-template-rows` savybėse, naudodami laužtinius skliaustus:

            .grid-container {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
  grid-template-rows: [header-start] 50px [header-end content-start] auto [content-end footer-start] 30px [footer-end];
}
            

              
                Copy
              
            
          

Šiame pavyzdyje pavadinome kelias tinklelio linijas: `start`, `content-start`, `content-end`, `end`, `header-start`, `header-end`, `footer-start` ir `footer-end`. Atkreipkite dėmesį, kad tinklelio linija gali turėti kelis pavadinimus, atskirtus tarpu (pvz., `[header-end content-start]`).

Tada galite naudoti šiuos pavadinimus tinklelio elementų pozicionavimui, naudodami `grid-column-start`, `grid-column-end`, `grid-row-start` ir `grid-row-end`:

            .grid-item {
  grid-column-start: content-start;
  grid-column-end: content-end;
  grid-row-start: content-start;
  grid-row-end: content-end;
}
            

              
                Copy
              
            
          

Paveldėtų tinklelio linijų identifikavimas su Subgrid

Tikroji galia atsiskleidžia sujungus takelių pavadinimus su pogrupio tinkleliu (subgrid). Pogrupio tinkliai paveldi takelių *dydžius* iš pirminio tinklelio, bet jie taip pat paveldi ir tinklelio linijų *pavadinimus*. Tai leidžia kurti giliai įdėtus maketus, kurie išlaiko nuoseklumą ir skaitomumą, net ir per kelis įdėjimo lygius.

Apsvarstykite scenarijų, kai turite svetainę su pagrindiniu tinkleliu, apibrėžiančiu bendrą išdėstymą: antraštę, turinį ir poraštę. Turinio srityje turite pogrupio tinklelį straipsniams rodyti. Galite naudoti takelių pavadinimus, kad užtikrintumėte, jog straipsnių pogrupio tinklelis puikiai dera su pagrindinio tinklelio stulpelių struktūra.

Pavyzdys: Svetainės maketas su straipsnio pogrupio tinkleliu

Pirmiausia apibrėžkime pagrindinį tinklelį:

            <div class="main-grid">
  <header class="header">Header</header>
  <main class="content">
    <article class="article">
      <h2 class="article-title">Article Title</h2>
      <p class="article-body">Article content goes here...</p>
    </article>
  </main>
  <footer class="footer">Footer</footer>
</div>
            

              
                Copy
              
            
          

            .main-grid {
  display: grid;
  grid-template-columns: [full-start] minmax(20px, 1fr) [content-start] minmax(300px, 8fr) [content-end] minmax(20px, 1fr) [full-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header header header"
    "content content content content"
    "footer footer footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.content {
  grid-area: content;
  background-color: #fff;
  padding: 10px;
}

.footer {
  grid-area: footer;
  grid-column: full-start / full-end; /* Ensure the footer spans the full width */
  background-color: #eee;
  padding: 10px;
}
            

              
                Copy
              
            
          

Dabar padarykime `.article` elementą pogrupio tinkleliu, paveldinčiu stulpelių struktūrą ir pavadintas tinklelio linijas:

            .article {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: content-start / content-end; /* Position article within content area */
  background-color: #f9f9f9;
  padding: 10px;
}

.article-title {
  grid-column: full-start / full-end; /* Spans the entire width of the subgrid */
}

.article-body {
  grid-column: content-start / content-end; /* Aligns with the content area of the main grid */
}
            

              
                Copy
              
            
          

Šiame pavyzdyje `.article` elementas tampa pogrupio tinkleliu, paveldinčiu pavadintas tinklelio linijas `full-start`, `content-start`, `content-end` ir `full-end` iš `.main-grid`. `.article-title` yra stilizuotas taip, kad apimtų visą pogrupio tinklelio plotį, o `.article-body` yra išlygintas su pagrindinio tinklelio turinio sritimi dėl paveldėtų tinklelio linijų pavadinimų.

Takelių pavadinimų naudojimo su Subgrid privalumai

• Pagerintas skaitomumas: Naudojant aprašomuosius pavadinimus vietoj skaitinių indeksų, jūsų CSS tampa lengviau suprantamas ir prižiūrimas.
• Geresnė priežiūra: Kai reikia keisti tinklelio struktūrą, takelių pavadinimai išlieka nuoseklūs, sumažinant riziką sugadinti maketą.
• Didesnis lankstumas: Galite lengvai pakeisti tinklelio elementų poziciją tiesiog pakeisdami jų tinklelio linijų pavadinimus, nereikia perskaičiuoti skaitinių indeksų.
• Nuoseklūs maketai: Pogrupio tinklelis su takelių pavadinimais užtikrina, kad įdėti elementai puikiai dera su pirminiu tinkleliu, sukuriant vizualiai patrauklią ir nuoseklią vartotojo patirtį.

Praktiniai pavyzdžiai ir panaudojimo atvejai

Štai keletas praktinių pavyzdžių ir panaudojimo atvejų, kur CSS pogrupio tinklelio takelių pavadinimai gali būti ypač naudingi:

• Sudėtingos formos: Išlygiuokite formų etiketes ir įvesties laukus skirtingose sekcijose, naudodami pagrindinį tinklelį ir pogrupio tinklelius kiekvienai formos sekcijai.
• Produktų sąrašai: Sukurkite nuoseklius produktų kortelių maketus su paveikslėliais, pavadinimais ir aprašymais, išlygiuotais naudojant pogrupio tinklelį kiekvienoje kortelėje.
• Valdymo skydelių maketai: Kurkite lanksčius valdymo skydelių maketus su keliais skydeliais, kurie paveldi pagrindinio tinklelio stulpelių struktūrą.
• Žurnalo stiliaus maketai: Kurkite sudėtingus žurnalų maketus su iškeltais straipsniais ir šoninėmis juostomis, kurios sklandžiai dera naudojant pogrupio tinklelį ir takelių pavadinimus. Apsvarstykite, kaip leidiniai, tokie kaip National Geographic, galėtų struktūrizuoti savo maketus.
• El. prekybos produktų puslapiai: Pasiekite tikslų produktų paveikslėlių, pavadinimų, aprašymų ir kainų informacijos valdymą el. prekybos svetainėse, tokiose kaip Amazon, kur vizualinis nuoseklumas yra raktas į vartotojo patirtį.

Pažangios technikos ir svarstymai

`minmax()` naudojimas su takelių pavadinimais

Derinkite takelių pavadinimus su `minmax()` funkcija, kad sukurtumėte adaptyvius tinklelius, kurie prisitaiko prie skirtingų ekrano dydžių. Pavyzdžiui:

            .grid-container {
  display: grid;
  grid-template-columns: [start] minmax(20px, 1fr) [content-start] minmax(300px, 8fr) [content-end] minmax(20px, 1fr) [end];
}
            

              
                Copy
              
            
          

Tai užtikrina, kad turinio sritis visada turės minimalų 300px plotį, bet galės išsiplėsti, kad užpildytų visą turimą erdvę.

Darbas su numanomais (implicit) ir aiškiais (explicit) tinkleliais

Atkreipkite dėmesį į skirtumą tarp numanomų ir aiškių tinklelių. Aiškūs tinkleliai yra apibrėžiami naudojant `grid-template-columns` ir `grid-template-rows`, o numanomi tinkleliai sukuriami automatiškai, kai turinys patalpinamas už aiškaus tinklelio ribų. Takelių pavadinimai pirmiausia taikomi aiškiems tinkleliams.

Naršyklių suderinamumas

Pogrupio tinklelis (Subgrid) yra gana gerai palaikomas šiuolaikinėse naršyklėse, tačiau visada gera idėja patikrinti naršyklių suderinamumą naudojant tokius šaltinius kaip Can I use.... Pateikite atsarginius sprendimus senesnėms naršyklėms, kurios nepalaiko pogrupio tinklelio.

Prieinamumo aspektai

Užtikrinkite, kad jūsų tinklelio maketai būtų prieinami vartotojams su negalia. Naudokite semantinį HTML ir pateikite alternatyvius būdus pasiekti turinį vartotojams, kurie negali naudotis pele ar kitu rodymo įrenginiu. Tinkamai struktūrizuotos antraštės, etiketės ir ARIA atributai yra labai svarbūs prieinamumui.

Gerosios CSS Subgrid takelių pavadinimų praktikos

• Naudokite aprašomuosius pavadinimus: Pasirinkite takelių pavadinimus, kurie aiškiai nurodo tinklelio linijų paskirtį.
• Išlaikykite nuoseklumą: Naudokite nuoseklią pavadinimų suteikimo tvarką visame projekte.
• Venkite pernelyg sudėtingų pavadinimų: Laikykite takelių pavadinimus glaustus ir lengvai įsimenamus.
• Dokumentuokite savo tinklelio struktūrą: Pridėkite komentarus prie savo CSS, kad paaiškintumėte tinklelio struktūrą ir takelių pavadinimų suteikimo taisykles.
• Testuokite kruopščiai: Išbandykite savo tinklelio maketus skirtinguose įrenginiuose ir naršyklėse, kad įsitikintumėte, jog jie veikia kaip tikėtasi.

Dažniausios klaidos, kurių reikia vengti

• Klaidinančių ar dviprasmiškų pavadinimų naudojimas: Venkite naudoti pavadinimus, kurie nėra aiškūs arba gali būti neteisingai interpretuojami.
• Nenuoseklios pavadinimų suteikimo taisyklės: Laikykitės nuoseklios pavadinimų suteikimo tvarkos visame projekte.
• Pamiršimas apibrėžti takelių pavadinimus: Įsitikinkite, kad apibrėžėte takelių pavadinimus visoms svarbioms tinklelio linijoms.
• Netestavimas skirtingose naršyklėse: Visada išbandykite savo tinklelio maketus skirtingose naršyklėse, kad užtikrintumėte suderinamumą.
• Pernelyg dažnas Subgrid naudojimas: Nors pogrupio tinklelis yra galingas, tai ne visada geriausias sprendimas. Apsvarstykite, ar paprastesnis maketavimo būdas nebūtų tinkamesnis.

Išvada

CSS pogrupio tinklelio (subgrid) takelių pavadinimai yra galinga technika, skirta kurti lengviau prižiūrimus, lankstesnius ir nuoseklesnius maketus. Naudodami paveldėtus tinklelio linijų pavadinimus, galite kurti sudėtingus įdėtus tinklelius, kuriuos lengva suprasti ir keisti. Įtraukite takelių pavadinimus į savo CSS Tinklelio darbo eigą, kad atvertumėte naujas galimybes ir sukurtumėte stulbinančius interneto dizainus. Eksperimentuokite su skirtingais maketais, takelių pavadinimais ir adaptyviomis technikomis, kad įvaldytumėte šį vertingą įgūdį. Nesvarbu, ar kuriate paprastą tinklaraštį, ar sudėtingą interneto programą, pogrupio tinklelio takelių pavadinimai gali padėti sukurti vizualiai patrauklias ir funkcionalias vartotojo sąsajas.

Taikydami globalią perspektyvą ir atsižvelgdami į prieinamumą, galite užtikrinti, kad jūsų CSS Tinklelio maketai būtų įtraukiantys ir prieinami vartotojams iš visų socialinių sluoksnių.