CSS Grid'i alad: Nimetatud paigutuspiirkondade meisterlik haldamine

CSS Grid on võimas paigutustööriist, mis võimaldab arendajatel luua keerukaid ja responsiivseid veebidisaine kerge vaevaga. Kuigi põhilised grid'i kontseptsioonid nagu read, veerud ja vahed on olulised, viivad CSS Grid'i alad paigutuse kontrolli järgmisele tasemele, tuues sisse nimetatud piirkonnad teie grid'is. See lähenemine pakub semantilisemat ja intuitiivsemat viisi paigutuse defineerimiseks ja haldamiseks, muutes teie koodi loetavamaks ja hooldatavamaks.

Mis on CSS Grid'i alad?

CSS Grid'i alad võimaldavad teil määratleda oma grid'is kindlaid piirkondi nimede abil. Neid nimetatud alasid saab seejärel määrata erinevatele grid'i elementidele, luues selge ja loogilise struktuuri teie paigutusele. Selle asemel, et tugineda ainult rea- ja veerunumbritele, saate kasutada kirjeldavaid nimesid oma veebisaidi erinevate osade esindamiseks, nagu 'header', 'nav', 'main', 'sidebar' ja 'footer'.

CSS Grid'i alade kasutamise eelised

• Parem loetavus: Nimetatud alad muudavad teie koodi lihtsamini mõistetavaks ja hooldatavaks. Grid'i mallist saab teie paigutuse visuaalne esitus, mis teeb selgeks, kuidas erinevad elemendid on paigutatud.
• Suurem paindlikkus: Saate oma paigutust hõlpsasti ümber korraldada, muutes lihtsalt grid'i malli, ilma et peaksite muutma üksikute grid'i elementide asukohti.
• Responsiivne disain on lihtsam: CSS Grid'i alad lihtsustavad responsiivsete paigutuste loomise protsessi. Saate määratleda erinevaid grid'i malle erinevatele ekraanisuurustele, mis võimaldab teil oma paigutust kohandada erinevatele seadmetele.
• Vähendatud koodi dubleerimine: Määrates grid'i malli ühe korra, saate seda taaskasutada mitme elemendi puhul, vähendades koodi dubleerimist ja parandades hooldatavust.

Kuidas CSS Grid'i alasid defineerida ja kasutada

CSS Grid'i alade kasutamiseks peate defineerima grid'i konteineri, määrama grid'i malli ja määrama grid'i elemendid kindlatele aladele. Siin on samm-sammuline juhend:

1. Looge Grid'i konteiner

Esmalt peate looma grid'i konteineri, seadistades display omaduse väärtuseks grid või inline-grid:

            .container {
  display: grid;
}

            

              
                Copy
              
            
          

2. Määratlege Grid'i mall

Omadust grid-template-areas kasutatakse nimetatud grid'i alade defineerimiseks. See aktsepteerib stringide seeriat, kus iga string esindab rida grid'is ja sõnad igas stringis esindavad veerge. Siin on näide:

            .container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* Kohandage vastavalt vajadusele */
}

            

              
                Copy
              
            
          

Selles näites oleme defineerinud grid'i kolme rea ja kolme veeruga. header ja footer ulatuvad üle kogu grid'i laiuse, samas kui nav, main ja sidebar asuvad keskmises reas. Omadused grid-template-columns ja grid-template-rows määravad vastavalt veergude ja ridade suuruse. fr on murdosa ühik; auto suurustab sisu põhjal.

3. Määrake Grid'i elemendid aladele

Nüüd saate määrata grid'i elemendid kindlatele aladele, kasutades grid-area omadust:

            .header {
  grid-area: header;
  background-color: #eee;
  padding: 1rem;
  text-align: center;
}

.nav {
  grid-area: nav;
  background-color: #ddd;
  padding: 1rem;
}

.main {
  grid-area: main;
  background-color: #ccc;
  padding: 1rem;
}

.sidebar {
  grid-area: sidebar;
  background-color: #bbb;
  padding: 1rem;
}

.footer {
  grid-area: footer;
  background-color: #aaa;
  padding: 1rem;
  text-align: center;
}

            

              
                Copy
              
            
          

Iga grid'i element on määratud kindlale alale, kasutades grid-area omadust. Selle omaduse väärtus peab vastama nimele, mis on defineeritud grid-template-areas omaduses.

4. HTML struktuur

HTML struktuur peaks peegeldama kavandatud paigutust:

            <div class="container">
  <header class="header">Päis</header>
  <nav class="nav">Navigatsioon</nav>
  <main class="main">Põhisisu</main>
  <aside class="sidebar">Külgriba</aside>
  <footer class="footer">Jalus</footer>
</div>

            

              
                Copy
              
            
          

Edasijõudnute tehnikad ja parimad praktikad

Punkti (.) kasutamine tühjade lahtrite jaoks

Saate kasutada punkti (.) tühjade lahtrite esindamiseks grid'i mallis. See on kasulik tühimike või vahede loomiseks teie paigutuses. Parim on kasutada mitut punkti (...), kui soovite tagada, et tühi ala oleks ridade vahel visuaalselt joondatud, mis aitab parandada loetavust.

            .container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "... main ..."
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto auto;
  height: 100vh;
}

            

              
                Copy
              
            
          

Selles näites lisatakse põhisisu ja jaluse vahele tühi rida. Pange tähele, et korduvaid punkte käsitletakse ühe "null" lahtrina, mis tähendab, et nimetatud ala ei saa punktide abil üle ridade ulatuda. Vajadusel peaksite defineerima uued alad.

Responsiivne disain meediapäringutega

CSS Grid'i alasid saab kombineerida meediapäringutega, et luua responsiivseid paigutusi, mis kohanduvad erinevatele ekraanisuurustele. Saate määratleda erinevaid grid'i malle erinevatele murdepunktidele, mis võimaldab teil oma paigutust ümber korraldada vastavalt seadme ekraanisuurusele. Näiteks:

            .container {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  height: 100vh;
}

@media (min-width: 768px) {
  .container {
    grid-template-areas:
      "header header header"
      "nav main sidebar"
      "footer footer footer";
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
  }
}

            

              
                Copy
              
            
          

Selles näites on paigutus väiksematel ekraanidel vertikaalselt virnastatud. Kui ekraani suurus on 768 pikslit või suurem, muutub paigutus kolmeveeruliseks grid'iks, kus on päis, navigatsioon, põhisisu, külgriba ja jalus.

grid-template lühendi kasutamine

grid-template lühendomadus võimaldab teil defineerida omadused grid-template-rows, grid-template-columns ja grid-template-areas ühel real. See võib muuta teie koodi lühemaks ja loetavamaks.

            .container {
  display: grid;
  grid-template:
    "header header header" auto
    "nav main sidebar" 1fr
    "footer footer footer" auto /
    1fr 3fr 1fr;
  height: 100vh;
}

            

              
                Copy
              
            
          

See on samaväärne järgmisega:

            .container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr 1fr;
  height: 100vh;
}

            

              
                Copy
              
            
          

grid-template lühendi süntaks on järgmine: grid-template: <grid-template-areas> / <grid-template-columns>. Rea väärtused saab lisada reaalselt pärast iga rea definitsiooni.

Kattuvate alade käsitlemine

Kuigi CSS Grid'i alad on võimsad, on oluline vältida kattuvate alade tekkimist. Kattuvad alad võivad põhjustada ootamatut paigutuskäitumist ja muuta teie koodi raskemini hooldatavaks. Veenduge, et teie grid'i mall on hästi defineeritud ja et iga ala on määratud unikaalsele piirkonnale grid'is.

Juurdepääsetavuse kaalutlused

CSS Grid'i alade kasutamisel on oluline arvestada juurdepääsetavusega. Veenduge, et teie paigutus on loogiliselt struktureeritud ja et sisu esitatakse tähenduslikus järjekorras, isegi kui CSS on keelatud. Kasutage semantilisi HTML-elemente ja ARIA atribuute, et parandada juurdepääsetavust puuetega kasutajatele. Hea tava on tagada, et teie sisu lähtekoodi järjekord oleks mõistlik sõltumata grid'i paigutusest.

Reaalse elu näited

E-kaubanduse tooteleht

Kujutage ette e-kaubanduse tootelehte järgmise paigutusega:

• Päis: Sisaldab veebisaidi logo ja navigatsioonimenüüd.
• Toote pilt: Kuvab peamise toote pildi.
• Toote detailid: Sisaldab toote nime, kirjeldust ja hinda.
• Lisa ostukorvi: Nupp, mis võimaldab kasutajatel toote ostukorvi lisada.
• Seotud tooted: Jaotis, mis kuvab teisi tooteid, mis võiksid kasutajatele huvi pakkuda.
• Jalus: Sisaldab autoriõiguste teavet ja linke teistele lehtedele.

Saate kasutada CSS Grid'i alasid selle paigutuse loomiseks järgmise grid'i malliga:

            .product-page {
  display: grid;
  grid-template-areas:
    "header header"
    "image details"
    "image add-to-cart"
    "related related"
    "footer footer";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto 1fr auto;
}

            

              
                Copy
              
            
          

See grid'i mall defineerib kaheveerulise paigutuse viie reaga. Päis ja jalus ulatuvad üle kogu grid'i laiuse, samas kui toote pilt, toote detailid ja lisa-ostukorvi-nupp on paigutatud keskmistesse ridadesse. Seotud toodete jaotis asub eelviimases reas.

Uudiste veebisaidi avaleht

Uudiste veebisaidi avaleht sisaldab tavaliselt päist, navigatsioonimenüüd, põhisisu ala esiletõstetud artiklitega, külgriba värskete uudiste ja reklaamidega ning jalust.

Siin on, kuidas võiksite seda struktureerida CSS Grid'i aladega:

            .news-homepage {
  display: grid;
  grid-template-areas:
    "header header"
    "nav nav"
    "main sidebar"
    "footer footer";
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto auto 1fr auto;
}

            

              
                Copy
              
            
          

Töölaua paigutus

Töölauad sisaldavad sageli erinevaid vidinaid, graafikuid ja andmetabeleid. CSS Grid'i alad aitavad neid elemente paigutada selgelt ja organiseeritult.

            .dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar widgets widgets"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-rows: auto 1fr 1fr auto;
}

            

              
                Copy
              
            
          

Veebilehitsejate ühilduvus

CSS Grid'i toetavad kõik kaasaegsed veebilehitsejad, sealhulgas Chrome, Firefox, Safari, Edge ja Opera. Seda toetavad ka enamik mobiilibrausereid. Vanemad brauserid ei pruugi aga CSS Grid'i toetada, seega on oluline pakkuda nendele brauseritele tagavaralahendust. Saate kasutada funktsioonipäringuid (@supports), et tuvastada, kas brauser toetab CSS Grid'i, ja vajadusel rakendada alternatiivseid stiile.

Alternatiivid CSS Grid'i aladele

Kuigi CSS Grid'i alad pakuvad võimsat ja paindlikku viisi paigutuste haldamiseks, on saadaval ka teisi võimalusi, millest igaühel on oma tugevused ja nõrkused.

CSS Flexbox

Flexbox on suurepärane ühemõõtmeliste paigutuste jaoks (kas read või veerud). Seda kasutatakse sageli navigatsioonimenüüde, elementide joondamiseks konteineris või lihtsate loendipõhiste paigutuste loomiseks. Flexbox paistab silma seal, kus sisu peab dünaamiliselt kohanema ja ruumi jaotama vastavalt oma suurusele.

CSS raamistikud (Bootstrap, Foundation)

CSS raamistikud nagu Bootstrap ja Foundation pakuvad eelnevalt ehitatud grid'i süsteeme ja komponente. Need raamistikud võivad arendust kiirendada, eriti projektide puhul, mis nõuavad ühtset visuaalset stiili ja laia valikut kasutajaliidese elemente. Samas võivad need lisada üleliigset koodi ja piirata kohandamist võrreldes natiivse CSS Grid'i kasutamisega.

`float`-põhised paigutused (pärand)

`float`-põhised paigutused olid tavaline lähenemine enne Flexboxi ja Grid'i. Kuigi need on mõne lihtsa paigutuse jaoks endiselt elujõulised, on need üldiselt vähem paindlikud ja raskemini hooldatavad kui kaasaegsed paigutustehnikad. Need nõuavad sageli `clearfix` häkke, et vältida paigutusprobleeme.

Kokkuvõte

CSS Grid'i alad on võimas tööriist keerukate ja responsiivsete veebipaigutuste loomiseks. Kasutades nimetatud alasid, saate defineerida oma paigutusele selge ja loogilise struktuuri, muutes oma koodi loetavamaks, hooldatavamaks ja lihtsamini kohandatavaks erinevatele ekraanisuurustele. Võtke omaks CSS Grid'i alad, et viia oma veebidisaini oskused järgmisele tasemele ning luua vapustavaid ja kasutajasõbralikke veebisaite.

Mõistes põhikontseptsioone, uurides edasijõudnute tehnikaid ja arvestades juurdepääsetavusega, saate rakendada CSS Grid'i alade täit potentsiaali ja luua tõeliselt märkimisväärseid veebikogemusi globaalsele publikule.