Sužinokite, kaip lengvai naudoti CSS tinklelius sudėtingiems maketams kurti.

Elementų išdėstymas tinklalapyje gali būti labai sudėtingas dirbant su sudėtingais maketais. Čia praverčia CSS tinklelis. Tai išdėstymo sistema, skirta supaprastinti sudėtingų maketų kūrimo procesą.

Kaip tai tau padeda? Skirtingai nuo tradicinių išdėstymo metodų, kurie leidžia išdėstyti elementus tik eilutėse arba stulpeliuose, CSS tinklelis siūlo geriausią iš abiejų pasaulių – 2D metodą naudojant eilutes ir stulpelius.

Tinklelio konteineriai ir elementai

CSS tinklelio ypatybes galite taikyti dviem pagrindiniams elementų tipams: tėvams ir vaikams. Kai nustatote pagrindinio elemento rodymo ypatybę į „tinklelis“, jis paverčiamas tinklelio sudėtiniu rodiniu. Bet kuris antrinis elementas šiame tinklelio sudėtiniame rodinyje tampa tinklelio elementu, paveldinčiu pritaikytas tinklelio savybes.

Štai kaip jis pavaizduotas:

Tinklelio elementas taip pat gali tapti tinklelio konteineriu. Dabar galite nurodyti išdėstymą kaip įdėtą tinklelį – tinklelį tinklelyje. Pagrindinis tinklelio konteineris dabar vadinamas išoriniu tinkleliu, o elementas pasuktas tinkleliu tampa vidine tinkleliu.

instagram viewer

Kiekvienas iš šių tinklelių veikia nepriklausomai nuo kitų, o tai reiškia, kad vidiniam tinkleliui nustatytos savybės neturi įtakos išorinio tinklelio išdėstymui ir atvirkščiai.

Štai kaip tai atrodo:

Labai svarbu įvaldyti tinklelio konteinerių ir daiktų ryšį statant dvimačius maketus efektyviai.

Atminkite, kad tinklelio konteineriams yra tinklelio savybės, o kitos yra skirtos tinklelio elementams.

Tinklelio linijos ir takeliai

Prieš pradėdami naudoti CSS tinklelį, turite žinoti du pagrindinius terminus:

  1. Tinklelio linijos: Tinklelio linijos reiškia horizontalias ir vertikalias linijas, kurios sudaro tinklelį CSS tinklelio išdėstyme. Jie nurodo eilučių ir stulpelių pradžios ir pabaigos taškus, padėdami sutvarkyti, kur viskas vyksta tinklelyje. Šios linijos yra tarsi dėžių kraštai; jie turi numerius, kurie padeda nurodyti elementus nustatant padėtį. Čia juos žymi raudona punktyrinė linija:
  2. Tinklelio takeliai: tai yra tarpai tarp tinklelio linijų, apibrėžiančių eilutes ir stulpelius. Jie yra tarsi tinklelio išdėstymo elementai. Aukščiau pateiktame paveikslėlyje kiekvieno elemento spalvota sritis reiškia tinklelio takelį.

Pagalvokite apie tinklelio linijas ir takelius kaip apie tinklelio išdėstymo blokus, kaip apie linijas milimetrinio popieriaus lape. Kai horizontali tinklelio linija susikerta su vertikalia tinklelio linija, ji sudaro dėžutės formos langelį. Šios ląstelės veikia kaip konteineriai, kuriuose galite įdėti savo tinklelio elementus.

CSS tinklelio konteinerio ypatybės

Tai yra ypatybės, kurias galite pritaikyti tinklelio konteineriui, kad sutvarkytumėte išdėstymą ir padėtų jame išdėstyti elementus. Kaip minėta anksčiau, vienas iš jų yra ekrano ypatybė, nustatyta į tinklelį. Čia yra daugiau:

Tinklelio šablonas

Ši savybė apibrėžia eilučių ir stulpelių dydį. Šių savybių dydį galite nustatyti naudodami pikselius, procentus arba trupmeninį vienetą (fr). Be to, galite naudoti tokius raktinius žodžius kaip automatinis, minmax (), ir kartoti () lankstumui padidinti.

  • tinklelis-šablonas-eilutės: nustato eilučių aukštį.
  • tinklelis-šablonas-stulpeliai: apibrėžia stulpelių plotį.

Štai keletas pavyzdžių:

Pikselių naudojimas:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Procentų naudojimas:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Naudojant fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Auto ir minmax() raktinių žodžių naudojimas:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Nuosekliam dydžiui naudokite pakartoti ():

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automatinio išdėstymo ir tinklelio šablonų sritys

Automatinis išdėstymas: Automatinis išdėstymas yra tarsi leidimas tinkleliui nuspręsti, kur dėti elementus. Jei nenurodysite tikslių pozicijų, tinklelis automatiškai pateiks elementus tokia tvarka, kokia jie rodomi žymėjime. Tai naudinga, kai turite daug elementų ir norite, kad jie tolygiai užpildytų tinklelį.

Tinklelio šablonų sritys: Pagalvokite apie tinklelio šablono sritis kaip apie maketo kūrimą naudojant pavadintas zonas. Tai tarsi patalpų pavadinimai aukšto plane. Galite remtis šiais sričių pavadinimais nustatydami tinklelio elementus. Pavyzdžiui:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Šis išdėstymas yra tarsi tinklelis su trimis stulpeliais ir keturiomis eilutėmis. Yra dvi pagrindinės turinio srities eilutės. Pažymėtose srityse yra „antraštė“, „šoninė juosta“, „turinys“ ir „poraštė“. Kituose skyriuose sužinosite, kaip naudoti šias srities etiketes kiekvieno tinklelio elemento ypatybėse.

Lygiavimas CSS tinklelyje

Norėdami valdyti tinklelio elementų padėtį tinklelio ląstelėse, galite naudoti lygiavimo ypatybes. Savybės yra:

  • pateisinti-elementai: valdo horizontalų elementų išlygiavimą tinklelio langelyje.
    • Vertybės: pradžia, pabaiga, centras ir ruožas.
  • išlyginti elementus: valdo vertikalų elementų išlygiavimą tinklelio langelyje.
    • Vertybės: pradžia, pabaiga, centras ir ruožas.
  • pateisinti-turinys: išlygiuoja visą tinklelį konteineryje išilgai horizontalios ašies.
    • Vertybės: pradžia, pabaiga, centras, ruožas, tarpas tarp, tarpas aplink ir tarpas tolygiai.
  • suderinti turinį: sulygiuoja visą tinklelį konteineryje išilgai vertikalios ašies.
    • Vertybės: pradžia, pabaiga, centras, ruožas, tarpas tarp, tarpas aplink ir tarpas tolygiai.

Štai pavyzdys:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

Šiame pavyzdyje elementai bus centruojami tiek horizontaliai, tiek vertikaliai savo langeliuose. Erdvė bus tolygiai paskirstyta tarp viso tinklelio stulpelių, o tinklelis konteineryje bus vertikaliai.

Tinklelio tarpas

Tinklelio tarpas reiškia tarpą tarp eilučių ir stulpelių tinklelio išdėstyme. Tai padeda sukurti vizualinį atskyrimą ir prideda vietos tarp tinklelio elementų.

The tinklelis-tarpelis ypatybė leidžia nustatyti tarpą tarp eilučių ir stulpelių. Norėdami jį apibrėžti, galite naudoti įvairius vienetus, pvz., pikselius (px), procentus (%), em vienetus (em) ir kt.

.grid-container {
grid-gap: 20px;
}

Šiame pavyzdyje tinklelio talpykloje yra du stulpeliai, tarp kurių yra 20 pikselių tarpas. Šis atstumas vizualiai atskiria stulpelius ir pagerina išdėstymą.

CSS tinklelio elemento ypatybės

Toliau pateikiamos kelios pagrindinės ypatybės, valdančios atskirų tinklelio elementų elgseną CSS tinklelio išdėstyme, kartu su pavyzdžiais:

tinklelis-eilės pradžia ir tinklelis-eilės pabaiga:

  • Apibrėžia elemento pradžios ir pabaigos eilutes.
  • Reikšmės gali būti eilučių numeriai, „span n“ arba „auto“. 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Šis kodas vietos 1 tinklelio elementas nuo antros eilės eilutės iki ketvirtos eilutės.

tinklelis-stulpelis-pradžia ir tinklelis-stulpelio pabaiga:

  • Apibrėžia elemento pradžios ir pabaigos stulpelio eilutes.
  • Reikšmės gali būti eilučių numeriai, „span n“ arba „auto“. 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Šis kodas vietos 2 tinklelio elementas nuo pirmos stulpelio eilutės iki trečios stulpelio eilutės.

tinklelio sritis:

  • Nurodo tinklelio elemento dydį ir padėtį tinklelyje, nurodant pavadintas tinklelio linijas tinklelis-šablonas-sritys.
  • Kaip minėta anksčiau, iš anksto nustatyti sričių pavadinimai jau naudojami su tinklelis-šablonas-sritys nuosavybė. Štai pavyzdys, kaip jį naudoti kartu su tinklelio sritis. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Štai rezultatas:

pateisinti save:

  • Sulygiuoja atskirus elementus horizontaliai savo langelyje.
  • Reikšmės gali būti pradžia, pabaiga, centras ir ruožas. 
.grid-item-5 {
justify-self: center;
}

Šis kodas horizontaliai centruoja Tinklelio 5 punktas savo ląstelėje.

lygiuotis-savaime:

  • Sulygiuokite atskirus elementus vertikaliai jo langelyje.
  • Reikšmės gali būti pradžia, pabaiga, centras ir ruožas. 
.grid-item-1 {
align-self: end;
}

Šis kodas suderinamas 1 tinklelio elementas į savo ląstelės dugną.

Nesivaržykite derinti ir tinkinti šias ypatybes, kad sukurtumėte norimą kiekvieno CSS tinklelio tinklelio elemento išdėstymą ir išvaizdą.

Interaktyvių maketų kūrimas naudojant CSS tinklelius

Naudojant CSS tinklelius kuriant reaguojančius maketus Svarbu užtikrinti, kad tinklalapis sklandžiai prisitaikytų prie įvairių dydžių ekranų ir įrenginių. Galite taikyti šiuos metodus:

  • Žiniasklaidos užklausos: Galite naudoti medijos užklausas pritaikyti skirtingus tinklelio išdėstymus, atsižvelgiant į ekrano dydį. Pavyzdžiui, gali tekti pertvarkyti tinklelio elementus arba koreguoti mažesnių ekranų stulpelių plotį.
  • Lankstūs vienetai: naudokite santykinius vienetus, tokius kaip procentai ir fr, kad tinklelio elementai ir stulpeliai būtų koreguojami proporcingai turimai vietai.
  • minmax (): Naudoti minmax () funkcija, kad nurodytumėte tinklelio stulpelių arba eilučių dydžių diapazoną. Tai užtikrina, kad elementai skirtinguose ekranuose neatrodytų per maži ar per dideli.

Nepamirškite pakoreguoti stulpelių ir kitų elementų, pvz., tarpų tarp tinklelio elementų, šrifto dydžių ir paraščių. Tai užtikrina nuoseklų ir gerai suplanuotą išdėstymą, kuris gerai veikia įvairiuose įrenginiuose.

Ištirkite CSS tinklelio išdėstymo galimybes

Pasinaudoję CSS tinklelio lankstumu ir galia, galėsite sukurti maketus, kurie ne tik puikiai atrodytų, bet ir sklandžiai prisitaikytų prie šiuolaikinio interneto dizaino reikalavimų. Taigi pasinerkite į tinklelių pasaulį, tyrinėkite galimybes ir patobulinkite savo žiniatinklio kūrimo įgūdžius.

Kai gilinatės į išdėstymo sistemas, galbūt norėsite palyginti kitus išdėstymo metodus su CSS tinkleliais. Tai galite padaryti naudodami CSS Flexbox modulį. Tai padės išmokti apsispręsti dirbant su projektu.