CSS Grid sritys: kaip įvaldyti pavadintas išdėstymo sritis adaptyviam dizainui

CSS Grid Layout siūlo neprilygstamą tinklalapių išdėstymo valdymą, o viena galingiausių jo funkcijų yra pavadintos tinklelio sritys (named grid areas). Tai leidžia kūrėjams apibrėžti loginius regionus tinklelyje ir jiems priskirti turinį, taip palengvinant sudėtingų ir adaptyvių dizainų kūrimą bei priežiūrą. Šis vadovas supažindins jus su CSS Grid sričių pagrindais, pateikdamas praktinių pavyzdžių ir įžvalgų, padėsiančių įvaldyti šią esminę techniką.

Kas yra CSS Grid sritys?

CSS Grid sritys leidžia apibrėžti pavadintus regionus jūsų CSS tinklelyje. Užuot pasikliaujant tik eilučių ir stulpelių numeriais, galite šiems regionams priskirti pavadinimus, taip sukurdami semantiškesnį ir lengviau skaitomą išdėstymo apibrėžimą. Šis metodas dramatiškai supaprastina turinio pertvarkymo procesą skirtingiems ekrano dydžiams, todėl jūsų svetainė tampa adaptyvesnė ir lengviau prižiūrima.

Įsivaizduokite, kad piešiate savo tinklalapio planą. Galite apibrėžti tokias sritis kaip „antraštė“, „navigacija“, „pagrindinė dalis“, „šoninė juosta“ ir „poraštė“, o tada į šias iš anksto apibrėžtas sritis talpinti savo turinį.

Pavadintų Grid sričių naudojimo privalumai

Geresnis skaitomumas: Pavadintos sritys paverčia jūsų tinklelio kodą labiau save dokumentuojančiu, pagerina skaitomumą ir priežiūrą.
Pagerintas adaptyvumas: Lengvai pertvarkykite išdėstymo regionus skirtingiems ekrano dydžiams, nekeisdami pagrindinės HTML struktūros.
Supaprastintas kodas: Sumažina jūsų CSS sudėtingumą, ypač esant sudėtingiems išdėstymams.
Didesnis lankstumas: Leidžia įgyvendinti kūrybiškesnius ir lankstesnius dizaino sprendimus.

Pagrindinė CSS Grid sričių sintaksė

Pagrindinė savybė, skirta apibrėžti pavadintas tinklelio sritis, yra grid-template-areas. Ši savybė naudojama kartu su grid-area, norint priskirti elementus konkrečioms sritims.

Štai pagrindinė sintaksė:

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

Šiame pavyzdyje grid-template-areas savybė apibrėžia 3x3 tinklelio išdėstymą. Kiekviena eilutė atitinka tinklelio eilutę, o kiekvienas žodis eilutėje atitinka stulpelį. Kiekvienam langeliui priskirti pavadinimai (pvz., „header“, „nav“, „main“) atitinka grid-area savybę, taikomą atskiriems elementams.

Praktiniai CSS Grid sričių pavyzdžiai

Panagrinėkime keletą praktinių pavyzdžių, kad iliustruotume CSS Grid sričių galią ir lankstumą.

1 pavyzdys: Pagrindinis svetainės išdėstymas

Apsvarstykite tipinį svetainės išdėstymą su antrašte, navigacija, pagrindinio turinio sritimi, šonine juosta ir porašte. Štai kaip galite tai įgyvendinti naudodami CSS Grid sritis:

<div class="grid-container">
 <header class="header">Antraštė</header>
 <nav class="nav">Navigacija</nav>
 <main class="main">Pagrindinis turinys</main>
 <aside class="aside">Šoninė juosta</aside>
 <footer class="footer">Poraštė</footer>
</div>

.grid-container {
 display: grid;
 grid-template-columns: 1fr 3fr 1fr; /* Stulpelių pločius koreguokite pagal poreikį */
 grid-template-rows: auto auto 1fr auto; /* Eilučių aukščius koreguokite pagal poreikį */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 height: 100vh; /* Svarbu, kad tinklelis užimtų visą ekraną */
}

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

Šiame pavyzdyje apibrėžėme tinklelį su trimis stulpeliais ir keturiomis eilutėmis. Kiekvienas elementas priskiriamas konkrečiai sričiai naudojant grid-area savybę. Atkreipkite dėmesį, kaip grid-template-areas savybė vizualiai atspindi svetainės išdėstymą.

2 pavyzdys: Adaptyvaus išdėstymo korekcijos

Vienas iš pagrindinių CSS Grid sričių pranašumų yra galimybė lengvai pertvarkyti išdėstymą skirtingiems ekrano dydžiams. Pakeiskime ankstesnį pavyzdį, kad sukurtume adaptyvų išdėstymą.

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

Šioje medijos užklausoje (media query) mes taikomės į ekranus, mažesnius nei 768px. Pakeitėme tinklelio išdėstymą į vieno stulpelio, išdėstydami antraštę, navigaciją, pagrindinį turinį, šoninę juostą ir poraštę vertikaliai. Tai pasiekiama paprasčiausiai pakeitus grid-template-areas savybę.

3 pavyzdys: Sudėtingas išdėstymas su persidengiančiomis sritimis

CSS Grid sritis taip pat galima naudoti kuriant sudėtingesnius išdėstymus su persidengiančiomis sritimis. Pavyzdžiui, galbūt norėsite turėti reklamjuostę, kuri apimtų kelis stulpelius.

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

Čia banner sritis apima visus tris stulpelius pirmoje eilutėje. Tai parodo CSS Grid sričių lankstumą kuriant vizualiai patrauklius ir sudėtingus išdėstymus.

Pažangios technikos ir geriausios praktikos

Dabar, kai suprantate CSS Grid sričių pagrindus, panagrinėkime keletą pažangių technikų ir geriausių praktikų, kurios padės jums tapti CSS Grid meistru.

Taško (.) naudojimas tuštiems langeliams

Galite naudoti tašką (.) grid-template-areas savybėje, norėdami nurodyti tuščią langelį. Tai naudinga kuriant vizualinius tarpus ar spragas jūsų išdėstyme.

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

Šiame pavyzdyje vidurinis langelis antroje eilutėje paliktas tuščias, sukuriant vizualų tarpą tarp navigacijos ir šoninės juostos.

`grid-template-areas` derinimas su `grid-template-columns` ir `grid-template-rows`

Nors grid-template-areas apibrėžia jūsų tinklelio struktūrą, jums vis tiek reikia apibrėžti stulpelių ir eilučių dydį naudojant grid-template-columns ir grid-template-rows. Svarbu pasirinkti tinkamus vienetus (pvz., fr, px, em, %) atsižvelgiant į jūsų dizaino reikalavimus.

Pavyzdžiui:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr; /* Daliniai vienetai adaptyviems stulpeliams */
 grid-template-rows: auto 1fr auto; /* Automatinis aukštis antraštei ir poraštei */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

`grid-gap` naudojimas tarpams tarp tinklelio elementų sukurti

Savybė grid-gap leidžia lengvai pridėti tarpus tarp tinklelio elementų. Tai gali pagerinti jūsų išdėstymo vizualinį patrauklumą ir skaitomumą.

.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; /* Pridėti 10px tarpą tarp tinklelio elementų */
}

Prieinamumo aspektai

Naudojant CSS Grid, labai svarbu atsižvelgti į prieinamumą. Užtikrinkite, kad loginė jūsų turinio tvarka HTML šaltinio kode atitiktų vizualinę tvarką išdėstyme. Jei vizualinė tvarka skiriasi, naudokite CSS, kad pakoreguotumėte vizualinį pateikimą, nepaveikdami pagrindinės struktūros.

Be to, pateikite aiškias ir aprašančias etiketes visiems interaktyviems elementams, kad pagerintumėte vartotojo patirtį žmonėms, naudojantiems pagalbines technologijas.

Naršyklių suderinamumas

CSS Grid Layout turi puikų palaikymą visose šiuolaikinėse naršyklėse. Tačiau visada yra gera praktika patikrinti suderinamumą ir pateikti atsarginius sprendimus senesnėms naršyklėms, kurios nepalaiko Grid.

Galite naudoti tokius įrankius kaip Can I use..., kad patikrintumėte naršyklių suderinamumą su CSS Grid Layout.

Realaus pasaulio pavyzdžiai ir atvejo analizės

Pažvelkime į keletą realaus pasaulio pavyzdžių, kaip CSS Grid sritys naudojamos šiuolaikiniame web dizaine.

1 pavyzdys: Naujienų svetainės perdizainavimas

Naujienų svetainė gali gauti didelės naudos iš CSS Grid sričių, sukurdama lankstų ir dinamišką išdėstymą, kuris prisitaiko prie skirtingų turinio tipų ir ekrano dydžių. Įsivaizduokite scenarijų, kai pagrindinį puslapį sudaro didelis iškeltas straipsnis, šoninė juosta su populiariausiomis naujienomis ir poraštė su autorių teisių informacija bei socialinių tinklų nuorodomis. Tokio tipo išdėstymą galima lengvai įgyvendinti naudojant CSS Grid sritis.

.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 pavyzdys: Portfolio svetainės kūrimas

Portfolio svetainė gali pasinaudoti CSS Grid sritimis, kad projektai būtų rodomi organizuotai ir vizualiai patraukliai. Dizainą gali sudaryti antraštė su menininko vardu ir kontaktine informacija, projektų miniatiūrų tinklelis ir poraštė su trumpa biografija bei socialinių tinklų nuorodomis. CSS Grid sritis galima naudoti siekiant užtikrinti, kad projektų miniatiūros būtų rodomos vienodai skirtinguose ekrano dydžiuose.

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

Čia repeat(auto-fit, minmax(200px, 1fr)) sukuria adaptyvų tinklelį, kuris automatiškai koreguoja stulpelių skaičių atsižvelgiant į turimą ekrano erdvę. Funkcija minmax() užtikrina, kad kiekviena miniatiūra būtų bent 200px pločio ir tolygiai užpildytų likusią erdvę.

3 pavyzdys: El. prekybos produkto puslapio kūrimas

El. prekybos produkto puslapį paprastai sudaro keli elementai, įskaitant produkto vaizdus, produkto aprašymą, kainodaros informaciją ir raginimo veikti (call-to-action) mygtukus. CSS Grid sritis galima naudoti šiems elementams išdėstyti aiškiai ir intuityviai, gerinant vartotojo patirtį ir didinant konversijų rodiklius.

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

Dažniausios klaidos, kurių reikėtų vengti

Nors CSS Grid sritys siūlo galingą ir lankstų būdą kurti išdėstymus, yra keletas dažnų klaidų, kurių kūrėjai turėtų vengti.

Perdėtas tinklelio sudėtingumas: Pradėkite nuo paprastos tinklelio struktūros ir palaipsniui didinkite sudėtingumą pagal poreikį. Venkite kurti pernelyg sudėtingus tinklelius, kuriuos sunku suprasti ir prižiūrėti.
Nenustatomi stulpelių ir eilučių dydžiai: Nepamirškite apibrėžti savo stulpelių ir eilučių dydžio naudojant grid-template-columns ir grid-template-rows. Be šių savybių jūsų tinklelis nebus atvaizduojamas teisingai.
Naršyklių suderinamumo ignoravimas: Visada patikrinkite naršyklių suderinamumą ir pateikite atsarginius sprendimus senesnėms naršyklėms, kurios nepalaiko CSS Grid Layout.
Prieinamumo pamiršimas: Užtikrinkite, kad jūsų išdėstymai būtų prieinami visiems vartotojams, įskaitant tuos, kurie naudoja pagalbines technologijas.
Netinkamas grid-template-areas naudojimas: Visada įsitikinkite, kad apibrėžti sričių pavadinimai yra teisingi ir atitinka grid-area savybes, pritaikytas atskiriems elementams.

Išvada

CSS Grid sritys suteikia galingą ir intuityvų būdą kurti sudėtingus ir adaptyvius web išdėstymus. Suprasdami pavadintų tinklelio sričių pagrindus ir laikydamiesi geriausių praktikų, galite atskleisti visą CSS Grid Layout potencialą ir kurti vizualiai patrauklias bei vartotojui draugiškas svetaines. Nesvarbu, ar kuriate paprastą tinklaraštį, ar sudėtingą el. prekybos platformą, CSS Grid sritys gali padėti jums sukurti išdėstymus, kurie yra tiek lankstūs, tiek lengvai prižiūrimi.

Pasinaudokite CSS Grid sričių galia ir pakelkite savo web dizaino įgūdžius į kitą lygį. Eksperimentuokite su skirtingais išdėstymais, tyrinėkite pažangias technikas ir prisidėkite prie nuolat besivystančio web kūrimo pasaulio.

Papildomi mokymosi šaltiniai: