CSS Grid'i nimega alade pärimine: vanem-ruudustiku alade leviku meisterlik valdamine

CSS Grid Layout on võimas tööriist keerukate ja reageerivate veebipaigutuste loomiseks. Üks selle kõige kasulikumaid funktsioone on võime defineerida nimega alasid, mis võimaldavad teil elemente ruudustikus lihtsalt paigutada. Kuigi nimega alade põhitõed on lihtsad, võib nende koostoime mõistmine pesastatud ruudustikega, eriti pärimise kaudu, avada teie CSS-koodis veelgi suurema paindlikkuse ja hooldatavuse. See artikkel süveneb CSS Grid'i nimega alade pärimisse ja vanem-ruudustiku alade levikusse, pakkudes praktilisi näiteid ja parimaid praktikaid, mis aitavad teil seda edasijõudnud tehnikat meisterlikult valdama õppida.

Mis on CSS Grid'i nimega alad?

Enne pärimise teemasse süvenemist tuletame kiirelt meelde, mis on CSS Grid'i nimega alad. Nimega alad on piirkonnad ruudustikus, mille te defineerite atribuudiga grid-template-areas. Te annate neile aladele nimed ja seejärel kasutate lastelementidel atribuuti grid-area, et paigutada need nendesse nimetatud piirkondadesse.

Siin on lihtne näide:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 10px;
}

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

.nav {
  grid-area: nav;
  background-color: lightgreen;
  padding: 10px;
}

.main {
  grid-area: main;
  background-color: lightcoral;
  padding: 10px;
}

.aside {
  grid-area: aside;
  background-color: lightyellow;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: lightgray;
  padding: 10px;
}

Selles näites on konteinerelement defineeritud kolme veeru ja kolme reaga ruudustikuna. Atribuut grid-template-areas defineerib viis nimega ala: header, nav, main, aside ja footer. Iga lastelement paigutatakse seejärel vastavasse alasse, kasutades atribuuti grid-area.

Ruudustiku alade pärimise mõistmine

Nüüd vaatleme, mis juhtub, kui teil on pesastatud ruudustikke. CSS Grid'i oluline aspekt on see, et grid-template-areas deklaratsioonid ei pärita vaikimisi. See tähendab, et kui te deklareerite nimega alad vanem-ruudustikul, ei rakendu need nimed automaatselt laps-ruudustikele.

Siiski saame ära kasutada kontseptsiooni, kus element defineeritakse nii ruudustiku elemendina (oma vanema ruudustikus) kui ka ruudustiku konteinerina (omaenda laste jaoks), et luua võimsaid pesastatud paigutusi. Kui laps-ruudustiku element on ise ruudustiku konteiner, saate defineerida selle enda grid-template-areas. Alade nimed *vanem*-ruudustikus ja alade nimed *laps*-ruudustikus on täiesti sõltumatud. Puudub otsene pärimismehhanism, mis edastaks nimega alade definitsioone mööda DOM-puud allapoole.

"Pärimine", millest me tegelikult räägime, on idee, et saame *levitada* või *peegeldada* vanem-ruudustiku nimega alade struktuuri laps-ruudustikus, et säilitada visuaalset järjepidevust ja paigutuse struktuuri. See saavutatakse, defineerides uuesti grid-template-areas atribuudi laps-ruudustikul, et see vastaks vanema ala paigutusele.

Vanem-ruudustiku alade levitamine: paigutuse struktuuri kordamine

Peamine tehnika, mida uurime, on *vanem-ruudustiku alade levitamine*. See hõlmab lapse ruudustiku grid-template-areas atribuudi selgesõnalist uuesti defineerimist, et see vastaks vanem-ruudustiku struktuurile. See annab võimaluse luua ühtne välimus ja tunnetus teie veebisaidi erinevates osades, samal ajal kui saate endiselt kasu CSS Grid'i paindlikkusest.

Näide: kaardikomponent ruudustiku sees

Oletame, et teil on CSS Grid'iga defineeritud lehepaigutus ja ühes ruudustiku alas soovite kuvada mitu kaardikomponenti. Igal kaardil peaks olema päis, sisu ja jalus, mis on paigutatud sarnaselt üldise lehepaigutusega.

.page-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 20px;
}

.page-header {
  grid-area: header;
  background-color: #eee;
  padding: 15px;
  text-align: center;
}

.page-nav {
  grid-area: nav;
  background-color: #ddd;
  padding: 15px;
}

.page-main {
  grid-area: main;
  display: grid; /* Muudame põhiosa ruudustiku konteineriks */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Reageeriv kaartide paigutus */
  gap: 20px;
  padding: 15px;
}

.page-aside {
  grid-area: aside;
  background-color: #ddd;
  padding: 15px;
}

.page-footer {
  grid-area: footer;
  background-color: #eee;
  padding: 15px;
  text-align: center;
}

/* Kaardikomponendi stiilid */
.card {
  display: grid; /* Muudame kaardi ruudustiku konteineriks */
  grid-template-columns: 1fr;  /* Üheveeruline paigutus kaardi sees */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "card-header"
    "card-content"
    "card-footer";
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.card-header {
  grid-area: card-header;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.card-content {
  grid-area: card-content;
  margin-bottom: 10px;
}

.card-footer {
  grid-area: card-footer;
  text-align: right;
  border-top: 1px solid #ccc;
  padding-top: 5px;
}

  
Päis
  
  

    

      
Kaardi päis 1
      
Kaardi sisu asub siin.
      
Jalus
    

    

      
Kaardi päis 2
      
Teine kaart mingi sisuga.
      
Jalus
    
  
  
  

Selles näites on .page-main ise ruudustiku konteiner, mis kuvab kaardikomponente. Iga .card element on samuti ruudustiku konteiner. Pange tähele, et .card kasutab grid-template-areas oma sisemise paigutuse defineerimiseks, kasutades erinevaid ala nimesid (card-header, card-content, card-footer) kui vanem .page-container. Need alad on täiesti sõltumatud.

Struktuuri peegeldamine: näide külgribaga

Nüüd kujutame ette, et main ala sees soovite sektsiooni, mis peegeldab vanem-ruudustiku struktuuri, võib-olla selleks, et luua külgriba konkreetse artikli sees. Saate levitada vanema ruudustiku struktuuri, et seda saavutada:

.article-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "article-header article-header"
    "article-nav article-main"
    "article-footer article-footer";
  gap: 10px;
}

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

.article-nav {
  grid-area: article-nav;
  background-color: #e0e0e0;
  padding: 10px;
}

.article-main {
  grid-area: article-main;
  padding: 10px;
}

.article-footer {
  grid-area: article-footer;
  background-color: #f0f0f0;
  padding: 10px;
}

HTML-is oleks teil midagi sellist:

  

    
Artikli päis
    
    
Artikli sisu
    
  

Siin defineerib .article-container uuesti grid-template-areas, et jäljendada tavalist lehepaigutuse struktuuri (päis, nav, põhiosa, jalus). Kuigi nimed on erinevad (article-header selle asemel, et olla lihtsalt header), on *paigutus* sarnane vanempaigutusele.

Parimad praktikad vanem-ruudustiku alade levitamiseks

• Kasutage tähendusrikkaid nimekonventsioone: Kuigi te ei *pea* kasutama eesliiteid nagu "card-" või "article-", on see väga soovitatav. Valige nimed, mis selgelt osutavad nimega alade kontekstile. See hoiab ära segaduse ja muudab teie CSS-i loetavamaks.
• Säilitage järjepidevus: Ruudustiku alade levitamisel püüdke saavutada järjepidevus üldises struktuuris. Kui vanem-ruudustikul on päis, põhiosa ja jalus, proovige seda struktuuri peegeldada ka laps-ruudustikus, isegi kui konkreetne sisu erineb.
• Vältige sügavat pesastamist: Kuigi CSS Grid lubab sügavat pesastamist, võib liigne pesastamine muuta teie koodi raskesti mõistetavaks ja hooldatavaks. Kaaluge, kas keerukate stsenaariumide puhul võiksid lihtsamad paigutustehnikad olla sobivamad.
• Dokumenteerige oma koodi: Dokumenteerige selgelt oma CSS Grid'i paigutused, eriti kui kasutate nimega alasid ja levitamistehnikaid. Selgitage iga ala eesmärki ja kuidas see on seotud üldise paigutusega. See on eriti kasulik suuremate projektide puhul või meeskonnas töötades.
• Kasutage CSS-muutujaid (Custom Properties): Keerukamate paigutuste jaoks kaaluge CSS-muutujate kasutamist ruudustiku alade nimede salvestamiseks. See võimaldab teil nimesid ühes kohas hõlpsalt värskendada ja lasta neil kajastuda kogu teie koodis.

Näide CSS-muutujate kasutamisest:

:root {
  --header-area: header;
  --nav-area: nav;
  --main-area: main;
  --aside-area: aside;
  --footer-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "var(--header-area) var(--header-area) var(--header-area)"
    "var(--nav-area) var(--main-area) var(--aside-area)"
    "var(--footer-area) var(--footer-area) var(--footer-area)";
  gap: 10px;
}

.header {
  grid-area: var(--header-area);
}

/* Ja sarnaselt teiste elementide puhul */

Kuigi see ei levita väärtusi otse, võimaldab see ruudustiku ala nime lihtsat muutmist ühes kohas, mis seejärel kajastub kogu teie stiililehel. Kui teil oleks vaja muuta päise ala nime "header" asemel "top", saate seda teha ühes kohas. See on hea tava, mida meeles pidada oma koodi loetavuse ja hooldatavuse huvides.

Juurdepääsetavuse kaalutlused

CSS Grid'i kasutamisel pidage alati silmas juurdepääsetavust. Veenduge, et teie paigutus oleks endiselt kasutatav ja arusaadav puuetega kasutajatele, sõltumata visuaalsest esitlusest. Siin on mõned olulised juurdepääsetavuse kaalutlused:

• Semantiline HTML: Kasutage semantilisi HTML-elemente (nt <header>, <nav>, <main>, <aside>, <footer>), et anda oma sisule struktuur ja tähendus. See aitab ekraanilugejatel ja teistel abitehnoloogiatel paigutust mõista.
• Loogiline lähtekoodi järjekord: Elementide järjekord HTML-i lähtekoodis peaks üldiselt peegeldama sisu loogilist lugemisjärjekorda. CSS Grid võib elemente visuaalselt ümber paigutada, kuid lähtekoodi järjekord peaks siiski olema mõistlik kasutajatele, kes toetuvad abitehnoloogiatele.
• Klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid (nt lingid, nupud, vormiväljad) oleksid klaviatuuriga navigeerimise kaudu ligipääsetavad. Kasutage atribuuti tabindex, et kontrollida elementide fookuse saamise järjekorda.
• Värvikontrast: Pakkuge piisavat värvikontrasti teksti ja tausta vahel, et sisu oleks loetav ka vaegnägijatele. Kasutage värvikontrasti kontrollijat, et veenduda, et teie värvikombinatsioonid vastavad juurdepääsetavuse standarditele (WCAG).
• Reageeriv disain: Looge reageerivaid paigutusi, mis kohanduvad erinevate ekraanisuuruste ja seadmetega. Kasutage meediapäringuid, et kohandada ruudustiku paigutust ja tagada sisu kasutatavus väiksematel ekraanidel.

Kokkuvõte

CSS Grid'i nimega alade pärimine ja vanem-ruudustiku alade levitamine on võimsad tehnikad paindlike ja hooldatavate veebipaigutuste loomiseks. Mõistes, kuidas nimega alad suhtlevad pesastatud ruudustikega, saate luua keerukaid ja ühtse välimusega paigutusi. Ärge unustage kasutada tähendusrikkaid nimekonventsioone, säilitada järjepidevust, vältida sügavat pesastamist ja dokumenteerida oma koodi. Neid parimaid praktikaid järgides saate ära kasutada CSS Grid'i võimsust, et luua vapustavaid ja juurdepääsetavaid veebikogemusi kasutajatele üle kogu maailma.