Atskleiskite CSS Grid Layout galią įvaldydami pavadintas sritis. Lengvai kurkite lanksčius ir adaptyvius išdėstymus naudodamiesi šiuo išsamiu vadovu.
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
irgrid-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 atitinkagrid-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: