CSS Grid alad: nimega paigutusalade meisterlik kasutamine reageerivas disainis

CSS Grid Layout pakub enneolematut kontrolli veebilehe paigutuste üle ja üks selle võimsamaid funktsioone on nimega gridi alad. See võimaldab arendajatel määratleda gridis loogilisi piirkondi ja paigutada neisse sisu, mis teeb keerukate ja reageerivate disainide loomise ja haldamise lihtsamaks. See juhend tutvustab teile CSS Grid alade põhitõdesid, pakkudes praktilisi näiteid ja teadmisi, mis aitavad teil seda olulist tehnikat meisterlikult valdama õppida.

Mis on CSS Grid alad?

CSS Grid alad võimaldavad teil määratleda oma CSS Gridis nimega piirkondi. Selle asemel, et tugineda ainult rea- ja veerunumbritele, saate neile piirkondadele nimesid anda, luues nii semantilisema ja loetavama paigutuse definitsiooni. See lähenemine lihtsustab oluliselt sisu ümberpaigutamist erinevate ekraanisuuruste jaoks, muutes teie veebisaidi reageerivamaks ja paremini hallatavaks.

Mõelge sellest kui oma veebilehele põrandaplaani joonistamisest. Saate määratleda alasid nagu "päis" (header), "navigatsioon" (navigation), "põhisisu" (main), "külgriba" (sidebar) ja "jalus" (footer) ning seejärel paigutada oma sisu nendesse eelnevalt määratletud aladesse.

Nimega gridi alade kasutamise eelised

Parem loetavus: Nimega alad muudavad teie gridi koodi isedokumenteerivamaks, parandades loetavust ja hooldatavust.
Parem reageerimisvõime: Saate hõlpsalt paigutuse piirkondi erinevate ekraanisuuruste jaoks ümber korraldada, muutmata aluseks olevat HTML-struktuuri.
Lihtsustatud kood: Vähendab teie CSS-i keerukust, eriti keerukate paigutuste puhul.
Suurem paindlikkus: Võimaldab loovamaid ja paindlikumaid disainilahendusi.

CSS Grid alade põhisüntaks

Nimega gridi alade defineerimise põhiomadus on grid-template-areas. Seda omadust kasutatakse koos grid-area'ga elementide määramiseks konkreetsetesse aladesse.

Siin on põhisüntaks:

.grid-container {
 display: grid;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

.header {
 grid-area: header;
}

.nav {
 grid-area: nav;
}

.main {
 grid-area: main;
}

.aside {
 grid-area: aside;
}

.footer {
 grid-area: footer;
}

Selles näites määratleb grid-template-areas omadus 3x3 gridi paigutuse. Iga rida esindab gridis ühte rida ja iga sõna reas esindab veergu. Igale lahtrile määratud nimed (nt "header", "nav", "main") vastavad üksikutele elementidele rakendatud grid-area omadusele.

CSS Grid alade praktilised näited

Uurime mõningaid praktilisi näiteid, et illustreerida CSS Grid alade võimsust ja paindlikkust.

Näide 1: Veebisaidi põhipaigutus

Kujutlege tüüpilist veebisaidi paigutust päise, navigatsiooni, põhisisu ala, külgriba ja jalusega. Siin on, kuidas saate seda rakendada, kasutades CSS Grid alasid:

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

.grid-container {
 display: grid;
 grid-template-columns: 1fr 3fr 1fr; /* Kohandage veergude laiust vastavalt vajadusele */
 grid-template-rows: auto auto 1fr auto; /* Kohandage ridade kõrgust vastavalt vajadusele */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 height: 100vh; /* Oluline, et grid kataks terve ekraani */
}

.header {
 grid-area: header;
 background-color: #eee;
 padding: 1em;
}

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

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

.aside {
 grid-area: aside;
 background-color: #bbb;
 padding: 1em;
}

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

Selles näites oleme määratlenud gridi kolme veeru ja nelja reaga. Iga element on määratud konkreetsele alale, kasutades grid-area omadust. Pange tähele, kuidas grid-template-areas omadus esindab visuaalselt veebisaidi paigutust.

Näide 2: Reageeriva paigutuse kohandused

Üks CSS Grid alade peamisi eeliseid on võime paigutust erinevate ekraanisuuruste jaoks hõlpsalt ümber korraldada. Muudame eelmist näidet, et luua reageeriv paigutus.

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

Selles meediapäringus sihtime ekraane, mis on kitsamad kui 768px. Oleme muutnud gridi paigutuse ühele veerule, paigutades päise, navigatsiooni, põhisisu, külgriba ja jaluse vertikaalselt. See saavutatakse lihtsalt grid-template-areas omaduse muutmisega.

Näide 3: Keeruline paigutus kattuvate aladega

CSS Grid alasid saab kasutada ka keerukamate paigutuste loomiseks, millel on kattuvad alad. Näiteks võite soovida bännerit, mis ulatub üle mitme veeru.

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "banner banner banner"
  "main main aside"
  "footer footer footer";
}

.banner {
 grid-area: banner;
 background-color: #888;
 color: white;
 padding: 2em;
 text-align: center;
}

Siin ulatub banner ala üle kõigi kolme veeru esimeses reas. See demonstreerib CSS Grid alade paindlikkust visuaalselt atraktiivsete ja keerukate paigutuste loomisel.

Täiustatud tehnikad ja parimad praktikad

Nüüd, kui te mõistate CSS Grid alade põhitõdesid, uurime mõningaid täiustatud tehnikaid ja parimaid praktikaid, mis aitavad teil saada CSS Gridi meistriks.

Punkti (.) kasutamine tühjade lahtrite tähistamiseks

Saate kasutada punkti (.) grid-template-areas omaduses, et tähistada tühja lahtrit. See on kasulik visuaalse vahe või tühimike loomiseks oma paigutuses.

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header header header"
  "nav . aside"
  "footer footer footer";
}

Selles näites on teise rea keskmine lahter jäetud tühjaks, luues visuaalse vahe navigatsiooni ja külgriba vahele.

`grid-template-areas` kombineerimine `grid-template-columns` ja `grid-template-rows` omadustega

Kuigi grid-template-areas määratleb teie gridi struktuuri, peate siiski määratlema veergude ja ridade suuruse, kasutades grid-template-columns ja grid-template-rows. Oluline on valida sobivad ühikud (nt fr, px, em, %) vastavalt oma disaininõuetele.

Näiteks:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr; /* Murtud ühikud reageerivate veergude jaoks */
 grid-template-rows: auto 1fr auto; /* Automaatne kõrgus päise ja jaluse jaoks */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

`grid-gap` kasutamine gridi elementide vahele vahe loomiseks

grid-gap omadus võimaldab teil hõlpsalt lisada vahesid gridi elementide vahele. See võib parandada teie paigutuse visuaalset atraktiivsust ja loetavust.

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 grid-gap: 10px; /* Lisage gridi elementide vahele 10px vahe */
}

Juurdepääsetavuse kaalutlused

CSS Gridi kasutamisel on oluline arvestada juurdepääsetavusega. Veenduge, et teie sisu loogiline järjekord HTML-i lähtekoodis vastab visuaalsele järjekorrale paigutuses. Kui visuaalne järjekord on erinev, kasutage CSS-i visuaalse esitluse kohandamiseks, mõjutamata aluseks olevat struktuuri.

Lisaks pakkuge kõigile interaktiivsetele elementidele selgeid ja kirjeldavaid silte, et parandada abistavaid tehnoloogiaid kasutavate inimeste kasutajakogemust.

Veebilehitsejate ühilduvus

CSS Grid Layout'il on suurepärane tugi kaasaegsetes veebilehitsejates. Siiski on alati hea tava kontrollida ühilduvust ja pakkuda varulahendusi vanematele brauseritele, mis Gridi ei toeta.

Saate kasutada tööriistu nagu Can I use..., et kontrollida CSS Grid Layout'i brauseriühilduvust.

Reaalse maailma näited ja juhtumiuuringud

Vaatame mõningaid reaalse maailma näiteid sellest, kuidas CSS Grid alasid kasutatakse kaasaegses veebidisainis.

Näide 1: Uudiste veebisaidi ümberkujundamine

Uudiste veebisait võib CSS Grid aladest palju kasu saada, luues paindliku ja dünaamilise paigutuse, mis kohandub erinevate sisutüüpide ja ekraanisuurustega. Kujutage ette stsenaariumi, kus avaleht koosneb suurest esiletõstetud artiklist, külgribast trendikate uudistega ja jalusest autoriõiguse teabe ja sotsiaalmeedia linkidega. Sellist tüüpi paigutust saab hõlpsasti rakendada CSS Grid alade abil.

.news-container {
 display: grid;
 grid-template-columns: 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "featured featured"
  "main sidebar"
  "footer footer";
}

.featured {
 grid-area: featured;
}

.main {
 grid-area: main;
}

.sidebar {
 grid-area: sidebar;
}

.footer {
 grid-area: footer;
}

Näide 2: Portfoolio veebisaidi loomine

Portfoolio veebisait saab kasutada CSS Grid alasid projektide korrastatud ja visuaalselt atraktiivsel viisil esitlemiseks. Disain võib koosneda päisest kunstniku nime ja kontaktandmetega, projektide pisipiltide ruudustikust ja jalusest lühikese biograafia ja sotsiaalmeedia linkidega. CSS Grid alasid saab kasutada tagamaks, et projekti pisipildid kuvatakse ühtlaselt erinevatel ekraanisuurustel.

.portfolio-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 grid-template-rows: auto;
 grid-gap: 10px;
}

Siin loob repeat(auto-fit, minmax(200px, 1fr)) reageeriva gridi, mis kohandab veergude arvu automaatselt vastavalt saadaolevale ekraaniruumile. Funktsioon minmax() tagab, et iga pisipilt on vähemalt 200 pikslit lai ja täidab ülejäänud ruumi võrdselt.

Näide 3: E-kaubanduse tootelehe ehitamine

E-kaubanduse tooteleht koosneb tavaliselt mitmest elemendist, sealhulgas tootepiltidest, tootekirjeldusest, hinnateabest ja tegevusele kutsuvatest nuppudest. CSS Grid alasid saab kasutada nende elementide selgel ja intuitiivsel viisil paigutamiseks, parandades kasutajakogemust ja suurendades konversioonimäärasid.

.product-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "image description"
  "image details"
  " . cta";
}

.product-image {
 grid-area: image;
}

.product-description {
 grid-area: description;
}

.product-details {
 grid-area: details;
}

.call-to-action {
 grid-area: cta;
 text-align: right;
}

Levinud vead, mida vältida

Kuigi CSS Grid alad pakuvad võimsat ja paindlikku viisi paigutuste loomiseks, on mõningaid levinud vigu, mida arendajad peaksid vältima.

Gridi liiga keeruliseks ajamine: Alustage lihtsa gridi struktuuriga ja lisage keerukust järk-järgult vastavalt vajadusele. Vältige liiga keerukate gridide loomist, mida on raske mõista ja hooldada.
Veergude ja ridade suuruste määratlemata jätmine: Ärge unustage määratleda oma veergude ja ridade suurust, kasutades grid-template-columns ja grid-template-rows. Ilma nende omadusteta ei renderdata teie gridi korrektselt.
Veebilehitsejate ühilduvuse eiramine: Kontrollige alati brauseri ühilduvust ja pakkuge varulahendusi vanematele brauseritele, mis ei toeta CSS Grid Layout'i.
Juurdepääsetavuse unustamine: Veenduge, et teie paigutused on juurdepääsetavad kõigile kasutajatele, sealhulgas neile, kes kasutavad abistavaid tehnoloogiaid.
grid-template-areas väärkasutamine: Veenduge alati, et määratletud alanime on kehtivad ja et need vastavad üksikutele elementidele rakendatud grid-area omadustele.

Kokkuvõte

CSS Grid alad pakuvad võimsat ja intuitiivset viisi keerukate ja reageerivate veebipaigutuste loomiseks. Mõistes nimega gridi alade põhitõdesid ja järgides parimaid praktikaid, saate avada CSS Grid Layout'i täieliku potentsiaali ning luua visuaalselt atraktiivseid ja kasutajasõbralikke veebisaite. Olenemata sellest, kas ehitate lihtsat blogi või keerukat e-kaubanduse platvormi, aitavad CSS Grid alad teil luua paigutusi, mis on nii paindlikud kui ka hooldatavad.

Võtke omaks CSS Grid alade võimekus ja viige oma veebidisaini oskused järgmisele tasemele. Katsetage erinevate paigutustega, uurige täiustatud tehnikaid ja panustage pidevalt arenevasse veebiarenduse maailma.

Täiendavad õppematerjalid: