Vodnik po mreži CSS: obvladovanje postavitev z lastnostmi mreže

Pozicioniranje elementov na spletni strani je lahko zelo zapleteno pri delu s kompleksnimi postavitvami. Tukaj pride prav mreža CSS. To je sistem postavitve, zasnovan za poenostavitev postopka ustvarjanja kompleksnih postavitev.

Kako vam pomaga? V nasprotju s tradicionalnimi načini postavitve, ki vam omogočajo samo postavitev elementov v vrstice ali stolpce, vam mreža CSS ponuja najboljše iz obeh svetov – 2D pristop z uporabo vrstic in stolpcev.

Mrežni zabojniki in predmeti

Lastnosti mreže CSS lahko uporabite za dve glavni vrsti elementov: nadrejeni in podrejeni. Ko nastavite lastnost prikaza na "grid" za nadrejeni element, ta element spremeni v vsebnik mreže. Vsak podrejeni element v tem mrežnem vsebniku postane mrežni element in podeduje uporabljene mrežne lastnosti.

Tukaj je predstavljeno:

Element mreže lahko postane tudi vsebnik mreže. Zdaj lahko postavitev imenujete ugnezdena mreža – mreža znotraj mreže. Vsebnik glavne mreže se zdaj imenuje zunanja mreža, medtem ko vsebnik, ki se spremeni v mrežo, postane notranja mreža.

Vsaka od teh mrež deluje neodvisno od druge, kar pomeni, da lastnosti, nastavljene za notranjo mrežo, ne vplivajo na postavitev zunanje mreže in obratno.

Tako je videti:

Obvladovanje razmerja med mrežnimi vsebniki in predmeti je bistveno za gradnjo dvodimenzionalnih postavitev učinkovito.

Upoštevajte, da obstajajo mrežne lastnosti za vsebnike mreže, druge pa za elemente mreže.

Mrežne črte in sledi

Preden začnete uporabljati mrežo CSS, morate poznati dva ključna izraza:

1. Mrežne črte: Mrežne črte se nanašajo na vodoravne in navpične črte, ki tvorijo mrežo v postavitvi mreže CSS. Določajo začetno in končno točko vrstic in stolpcev ter pomagajo organizirati, kam gredo stvari na mreži. Te črte so kot robovi škatel; imajo številke, ki vam pomagajo navesti elemente pri pozicioniranju. Tukaj jih predstavlja rdeča črtkana črta:
2. Mrežne sledi: To so vrzeli med mrežnimi črtami, ki določajo vrstice in stolpce. So kot gradniki mrežne postavitve. Na zgornji sliki barvno območje znotraj vsakega elementa predstavlja mrežno sled.

Mrežne črte in sledi si predstavljajte kot gradnike mrežne postavitve, kot so črte na listu milimetrskega papirja. Ko se vodoravna mrežna črta seka z navpično mrežno črto, tvori celico v obliki škatle. Te celice delujejo kot vsebniki, kamor lahko postavite elemente mreže.

Lastnosti mrežnega vsebnika CSS

To so lastnosti, ki jih lahko uporabite za vsebnik mreže, da organizirate postavitev in pomagate pri pozicioniranju elementov v njej. Kot smo že omenili, je ena od njih lastnost prikaza, nastavljena na mrežo. Tukaj je več:

Mrežna predloga

Ta lastnost določa velikost vrstic in stolpcev. Te lastnosti lahko prilagodite velikosti s slikovnimi pikami, odstotki ali ulomkom (fr). Uporabite lahko tudi ključne besede, kot je avto, minmax(), in ponovi () za povečanje prožnosti.

• grid-template-rows: nastavi višine vrstic.
• mreža-predloga-stolpci: Določa širine stolpcev.

Tukaj je nekaj primerov:

Uporaba pikslov:

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

Uporaba odstotkov:

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

Uporaba fr:

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

Uporaba ključnih besed auto in minmax().:

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

Uporaba repeat() za dosledno določanje velikosti:

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

Samodejna umestitev in območja predlog mreže

Samodejna umestitev: Samodejna umestitev je kot dovolitev, da mreža odloči, kam postaviti elemente. Če ne podate natančnih položajev, bo mreža samodejno postavila elemente v vrstnem redu, kot so prikazani v oznaki. To je koristno, če imate veliko predmetov in želite, da enakomerno zapolnijo mrežo.

Območja mrežnih predlog: Območja mrežnih predlog si predstavljajte kot ustvarjanje postavitve z uporabo poimenovanih območij. To je kot poimenovanje sob na tlorisu. Pri pozicioniranju mrežnih elementov se lahko sklicujete na ta imena območij. Na primer:

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

Ta postavitev je kot mreža s tremi stolpci in štirimi vrsticami. Za področje glavne vsebine sta dve vrstici. Označena področja vključujejo »glavo«, »stransko vrstico«, »vsebino« in »nogo«. V naslednjih razdelkih se boste naučili, kako uporabiti te oznake območij v lastnostih vsakega elementa mreže.

Poravnava v mreži CSS

Lastnosti poravnave lahko uporabite za nadzor položaja mrežnih postavk znotraj njihovih mrežnih celic. Lastnosti so:

• justify-items: nadzoruje vodoravno poravnavo elementov v njihovi mrežni celici.
  • Vrednote: začetek, konec, sredina in raztezanje.
• align-items: nadzoruje navpično poravnavo elementov v njihovi mrežni celici.
  • Vrednote: začetek, konec, sredina in raztezanje.
• justify-content: Poravna celotno mrežo v vsebniku vzdolž vodoravne osi.
  • Vrednote: začetek, konec, sredina, razteg, presledek med, presledek okoli in presledek enakomerno.
• poravnati vsebino: Poravna celotno mrežo v vsebniku vzdolž navpične osi.
  • Vrednote: začetek, konec, sredina, razteg, presledek med, presledek okoli in presledek enakomerno.

Tukaj je primer:

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

V tem primeru bodo elementi v svojih celicah centrirani vodoravno in navpično. Prostor bo enakomerno porazdeljen med stolpce celotne mreže, mreža pa bo središče vsebnika navpično.

Mrežna vrzel

Mrežna vrzel se nanaša na prostor med vrsticami in stolpci v mrežni postavitvi. Pomaga ustvariti vizualno ločitev in doda nekaj prostora med elementi mreže.

The mrežna vrzel Lastnost vam omogoča nastavitev razmika med vrsticami in stolpci. Za določitev lahko uporabite različne enote, kot so piksli (px), odstotki (%), em enote (em) in druge.

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

V tem primeru ima mrežni vsebnik dva stolpca z razmikom 20 slikovnih pik med njima. Ta razmik vizualno ločuje stolpce in izboljša postavitev.

Lastnosti elementa mreže CSS

Tukaj je nekaj ključnih lastnosti, ki nadzirajo vedenje posameznih elementov mreže v postavitvi mreže CSS, skupaj s primeri:

začetek mrežne vrstice in konec mrežne vrstice:

• Določa začetno in končno vrstico vrstice za postavko.
• Vrednosti so lahko številke vrstic, "span n" ali "auto".

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Ta koda mesta 1. element mreže od črte druge vrstice do črte četrte vrstice.

začetek mreže-stolpca in konec mreže-stolpca:

• Določa začetno in končno vrstico stolpca za postavko.
• Vrednosti so lahko številke vrstic, "span n" ali "auto".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Ta koda mesta 2. element mreže od prve vrstice stolpca do tretje vrstice stolpca.

mrežno območje:

• Podaja velikost in položaj mrežnega elementa v mreži s sklicevanjem na imenovane mrežne črte v grid-template-areas.
• Kot smo že omenili, so vnaprej določena imena območij že v uporabi z grid-template-areas premoženje. Tukaj je primer, kako ga uporabiti skupaj z mrežno območje.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Tukaj je rezultat:

utemeljiti se:

• Vodoravno poravna posamezne elemente znotraj celice.
• Vrednosti so lahko začetek, konec, sredina in razteg.

.grid-item-5 {
justify-self: center;
}

Ta koda vodoravno centrira 5. element mreže znotraj svoje celice.

poravnati se:

• Poravnajte posamezne elemente navpično znotraj celice.
• Vrednosti so lahko začetek, konec, sredina in razteg.

.grid-item-1 {
align-self: end;
}

Ta koda se uskladi 1. element mreže na dno svoje celice.

Prosto združite in prilagodite te lastnosti, da ustvarite želeno postavitev in videz za vsak element mreže v mreži CSS.

Ustvarjanje odzivnih postavitev z uporabo mrež CSS

Uporaba mrež CSS za ustvarjanje odzivnih postavitev je pomembno zagotoviti, da se vaša spletna stran nemoteno prilagaja različnim velikostim zaslona in napravam. Uporabite lahko te metode:

• Medijske poizvedbe: Uporabite lahko medijske poizvedbe za uporabo različnih postavitev mreže glede na velikost zaslona. Na primer, morda boste morali preurediti elemente mreže ali prilagoditi širine stolpcev za manjše zaslone.
• Prilagodljive enote: uporabite relativne enote, kot so odstotki in fr, da omogočite sorazmerno prilagajanje postavk mreže in stolpcev razpoložljivemu prostoru.
• minmax(): Uporabi minmax() funkcijo za določanje obsega velikosti za stolpce ali vrstice mreže. Zagotavlja, da elementi na različnih zaslonih ne bodo videti premajhni ali preveliki.

Ne pozabite prilagoditi stolpcev in drugih elementov, kot so vrzeli med elementi mreže, velikosti pisave in robovi. Zagotavlja dosledno in dobro zasnovano postavitev, ki dobro deluje na različnih napravah.

Raziščite možnosti postavitve mreže CSS

Sprejemanje prilagodljivosti in moči mreže CSS vam bo omogočilo ustvarjanje postavitev, ki ne bodo samo videti odlično, ampak se bodo tudi brezhibno prilagajale zahtevam sodobnega spletnega oblikovanja. Potopite se torej v svet mrež, raziščite možnosti in izboljšajte svoje veščine spletnega razvoja.

Ko se poglobite v sisteme postavitve, boste morda želeli primerjati druge metode postavitve z mrežami CSS. To lahko storite z modulom CSS Flexbox. To vam bo pomagalo pri učenju odločanja pri delu na projektu.