CSS Grid Areas: Nosaukto izkārtojuma apgabalu apgūšana responsīvam dizainam

CSS Grid Layout piedāvā nepārspējamu kontroli pār tīmekļa lapu izkārtojumiem, un viena no tā jaudīgākajām funkcijām ir nosauktie grid apgabali. Tas ļauj izstrādātājiem definēt loģiskus reģionus režģī un piešķirt tiem saturu, tādējādi atvieglojot sarežģītu un responsīvu dizainu izveidi un uzturēšanu. Šī rokasgrāmata jūs iepazīstinās ar CSS Grid Areas pamatiem, sniedzot praktiskus piemērus un ieskatus, kas palīdzēs jums apgūt šo būtisko tehniku.

Kas ir CSS Grid apgabali?

CSS Grid apgabali ļauj definēt nosauktus reģionus jūsu CSS Grid režģī. Tā vietā, lai paļautos tikai uz rindu un kolonnu numuriem, jūs varat piešķirt nosaukumus šiem reģioniem, radot semantiskāku un lasāmāku izkārtojuma definīciju. Šī pieeja dramatiski vienkāršo satura pārkārtošanas procesu dažādiem ekrāna izmēriem, padarot jūsu vietni responsīvāku un vieglāk uzturamu.

Iedomājieties to kā savas tīmekļa lapas stāvu plāna zīmēšanu. Jūs varat definēt tādus apgabalus kā "header" (galvene), "navigation" (navigācija), "main" (galvenais saturs), "sidebar" (sānjosla) un "footer" (kājene), un pēc tam ievietot savu saturu šajos iepriekš definētajos apgabalos.

Nosaukto grid apgabalu izmantošanas priekšrocības

Uzlabota lasāmība: Nosauktie apgabali padara jūsu režģa kodu pašdokumentējošu, uzlabojot lasāmību un uzturēšanu.
Uzlabota responsivitāte: Viegli pārkārtojiet izkārtojuma reģionus dažādiem ekrāna izmēriem, nemainot pamatā esošo HTML struktūru.
Vienkāršots kods: Samazina jūsu CSS sarežģītību, īpaši sarežģītiem izkārtojumiem.
Palielināta elastība: Ļauj rast radošākus un elastīgākus dizaina risinājumus.

CSS Grid apgabalu pamata sintakse

Galvenā īpašība nosaukto grid apgabalu definēšanai ir grid-template-areas. Šī īpašība tiek izmantota kopā ar grid-area, lai piešķirtu elementus konkrētiem apgabaliem.

Šeit ir pamata sintakse:

.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;
}

Šajā piemērā grid-template-areas īpašība definē 3x3 režģa izkārtojumu. Katra rinda apzīmē rindu režģī, un katrs vārds rindā apzīmē kolonnu. Katrai šūnai piešķirtie nosaukumi (piemēram, "header", "nav", "main") atbilst grid-area īpašībai, kas piemērota atsevišķiem elementiem.

Praktiski CSS Grid apgabalu piemēri

Apskatīsim dažus praktiskus piemērus, lai ilustrētu CSS Grid apgabalu spēku un elastību.

1. piemērs: Pamata vietnes izkārtojums

Apskatīsim tipisku vietnes izkārtojumu ar galveni, navigāciju, galvenā satura apgabalu, sānjoslu un kājeni. Lūk, kā to var ieviest, izmantojot CSS Grid apgabalus:

<div class="grid-container">
 <header class="header">Galvene</header>
 <nav class="nav">Navigācija</nav>
 <main class="main">Galvenais saturs</main>
 <aside class="aside">Sānjosla</aside>
 <footer class="footer">Kājene</footer>
</div>

.grid-container {
 display: grid;
 grid-template-columns: 1fr 3fr 1fr; /* Pielāgojiet kolonnu platumus pēc nepieciešamības */
 grid-template-rows: auto auto 1fr auto; /* Pielāgojiet rindu augstumus pēc nepieciešamības */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 height: 100vh; /* Svarīgi, lai režģis aizņemtu visu ekrānu */
}

.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;
}

Šajā piemērā mēs esam definējuši režģi ar trīs kolonnām un četrām rindām. Katrs elements tiek piešķirts noteiktam apgabalam, izmantojot grid-area īpašību. Ievērojiet, kā grid-template-areas īpašība vizuāli atspoguļo vietnes izkārtojumu.

2. piemērs: Responsīva izkārtojuma pielāgojumi

Viena no galvenajām CSS Grid apgabalu priekšrocībām ir spēja viegli pārkārtot izkārtojumu dažādiem ekrāna izmēriem. Pārveidosim iepriekšējo piemēru, lai izveidotu responsīvu izkārtojumu.

@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";
 }
}

Šajā media vaicājumā mēs mērķējam uz ekrāniem, kas ir mazāki par 768px. Mēs esam mainījuši režģa izkārtojumu uz vienu kolonnu, izvietojot galveni, navigāciju, galveno saturu, sānjoslu un kājeni vertikāli vienu zem otra. To panāk, vienkārši modificējot grid-template-areas īpašību.

3. piemērs: Sarežģīts izkārtojums ar pārklājošiem apgabaliem

CSS Grid apgabalus var izmantot arī, lai izveidotu sarežģītākus izkārtojumus ar pārklājošiem apgabaliem. Piemēram, jūs varētu vēlēties baneri, kas stiepjas pāri vairākām kolonnām.

.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;
}

Šeit banner apgabals aptver visas trīs kolonnas pirmajā rindā. Tas demonstrē CSS Grid apgabalu elastību vizuāli pievilcīgu un sarežģītu izkārtojumu veidošanā.

Papildu tehnikas un labākās prakses

Tagad, kad jūs saprotat CSS Grid apgabalu pamatus, apskatīsim dažas papildu tehnikas un labākās prakses, kas palīdzēs jums kļūt par CSS Grid meistaru.

Punkta (".") notācijas izmantošana tukšām šūnām

Jūs varat izmantot punktu (.) grid-template-areas īpašībā, lai apzīmētu tukšu šūnu. Tas ir noderīgi, lai izveidotu vizuālas atstarpes vai spraugas jūsu izkārtojumā.

.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";
}

Šajā piemērā vidējā šūna otrajā rindā ir atstāta tukša, radot vizuālu atstarpi starp navigāciju un sānjoslu.

`grid-template-areas` apvienošana ar `grid-template-columns` un `grid-template-rows`

Lai gan grid-template-areas definē jūsu režģa struktūru, jums joprojām ir jādefinē kolonnu un rindu izmērs, izmantojot grid-template-columns un grid-template-rows. Ir svarīgi izvēlēties atbilstošas mērvienības (piemēram, fr, px, em, %), pamatojoties uz jūsu dizaina prasībām.

Piemēram:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr; /* Frakcionālās mērvienības responsīvām kolonnām */
 grid-template-rows: auto 1fr auto; /* Automātisks augstums galvenei un kājenei */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

`grid-gap` izmantošana, lai izveidotu atstarpes starp režģa elementiem

grid-gap īpašība ļauj viegli pievienot atstarpes starp režģa elementiem. Tas var uzlabot jūsu izkārtojuma vizuālo pievilcību un lasāmību.

.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; /* Pievienot 10px atstarpi starp režģa elementiem */
}

Apsvērumi par pieejamību

Lietojot CSS Grid, ir ļoti svarīgi ņemt vērā pieejamību. Pārliecinieties, ka jūsu satura loģiskā secība HTML pirmkodā atbilst vizuālajai secībai izkārtojumā. Ja vizuālā secība atšķiras, izmantojiet CSS, lai pielāgotu vizuālo noformējumu, neietekmējot pamatā esošo struktūru.

Turklāt nodrošiniet skaidrus un aprakstošus apzīmējumus visiem interaktīvajiem elementiem, lai uzlabotu lietotāju pieredzi cilvēkiem, kas izmanto palīgtehnoloģijas.

Pārlūkprogrammu saderība

CSS Grid Layout ir lielisks atbalsts visās mūsdienu pārlūkprogrammās. Tomēr vienmēr ir laba prakse pārbaudīt saderību un nodrošināt rezerves risinājumus vecākām pārlūkprogrammām, kas neatbalsta Grid.

Jūs varat izmantot tādus rīkus kā Can I use..., lai pārbaudītu CSS Grid Layout pārlūkprogrammu saderību.

Reālās pasaules piemēri un gadījumu izpēte

Apskatīsim dažus reālās pasaules piemērus, kā CSS Grid apgabali tiek izmantoti mūsdienu tīmekļa dizainā.

1. piemērs: Ziņu vietnes pārveidošana

Ziņu vietne var gūt lielu labumu no CSS Grid apgabaliem, izveidojot elastīgu un dinamisku izkārtojumu, kas pielāgojas dažādiem satura veidiem un ekrāna izmēriem. Iedomājieties scenāriju, kurā sākumlapa sastāv no liela galvenā raksta, sānjoslas ar aktuālākajām ziņām un kājenes ar autortiesību informāciju un sociālo mediju saitēm. Šāda veida izkārtojumu var viegli ieviest, izmantojot CSS Grid apgabalus.

.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;
}

2. piemērs: Portfolio vietnes izveide

Portfolio vietne var izmantot CSS Grid apgabalus, lai demonstrētu projektus organizētā un vizuāli pievilcīgā veidā. Dizains varētu sastāvēt no galvenes ar mākslinieka vārdu un kontaktinformāciju, projektu sīktēlu režģa un kājenes ar īsu biogrāfiju un sociālo mediju saitēm. CSS Grid apgabalus var izmantot, lai nodrošinātu, ka projektu sīktēli tiek vienmērīgi attēloti dažādos ekrāna izmēros.

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

Šeit repeat(auto-fit, minmax(200px, 1fr)) izveido responsīvu režģi, kas automātiski pielāgo kolonnu skaitu, pamatojoties uz pieejamo ekrāna vietu. minmax() funkcija nodrošina, ka katrs sīktēls ir vismaz 200px plats un vienmērīgi aizpilda atlikušo vietu.

3. piemērs: E-komercijas produkta lapas veidošana

E-komercijas produkta lapa parasti sastāv no vairākiem elementiem, tostarp produktu attēliem, produkta apraksta, informācijas par cenu un aicinājuma uz darbību pogām. CSS Grid apgabalus var izmantot, lai sakārtotu šos elementus skaidrā un intuitīvā veidā, uzlabojot lietotāja pieredzi un palielinot konversijas rādītājus.

.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;
}

Biežākās kļūdas, no kurām izvairīties

Lai gan CSS Grid apgabali piedāvā jaudīgu un elastīgu veidu, kā veidot izkārtojumus, ir dažas bieži sastopamas kļūdas, no kurām izstrādātājiem vajadzētu izvairīties.

Pārlieku sarežģīts režģis: Sāciet ar vienkāršu režģa struktūru un pakāpeniski pievienojiet sarežģītību pēc nepieciešamības. Izvairieties no pārlieku sarežģītu režģu izveides, kurus ir grūti saprast un uzturēt.
Kolonnu un rindu izmēru nedefinēšana: Atcerieties definēt savu kolonnu un rindu izmēru, izmantojot grid-template-columns un grid-template-rows. Bez šīm īpašībām jūsu režģis netiks attēlots pareizi.
Pārlūkprogrammu saderības ignorēšana: Vienmēr pārbaudiet pārlūkprogrammu saderību un nodrošiniet rezerves risinājumus vecākām pārlūkprogrammām, kas neatbalsta CSS Grid Layout.
Aizmirstot par pieejamību: Pārliecinieties, ka jūsu izkārtojumi ir pieejami visiem lietotājiem, tostarp tiem, kas izmanto palīgtehnoloģijas.
Nepareiza grid-template-areas lietošana: Vienmēr pārliecinieties, ka definētie apgabalu nosaukumi ir derīgi un ka tie atbilst grid-area īpašībām, kas piemērotas atsevišķiem elementiem.

Noslēgums

CSS Grid apgabali nodrošina jaudīgu un intuitīvu veidu, kā izveidot sarežģītus un responsīvus tīmekļa izkārtojumus. Izprotot nosaukto grid apgabalu pamatus un ievērojot labāko praksi, jūs varat atraisīt pilnu CSS Grid Layout potenciālu un izveidot vizuāli pievilcīgas un lietotājam draudzīgas vietnes. Neatkarīgi no tā, vai veidojat vienkāršu emuāru vai sarežģītu e-komercijas platformu, CSS Grid apgabali var palīdzēt jums izveidot izkārtojumus, kas ir gan elastīgi, gan viegli uzturami.

Izmantojiet CSS Grid apgabalu jaudu un paceliet savas tīmekļa dizaina prasmes jaunā līmenī. Eksperimentējiet ar dažādiem izkārtojumiem, izpētiet papildu tehnikas un sniedziet savu ieguldījumu nepārtraukti mainīgajā tīmekļa izstrādes pasaulē.

Papildu mācību resursi: