Vodič za CSS Grid: Savladavanje izgleda pomoću svojstava rešetke

Pozicioniranje elemenata na web stranici može biti vrlo komplicirano kada se radi sa složenim izgledima. Ovdje je CSS mreža korisna. To je sustav izgleda dizajniran da pojednostavi proces stvaranja složenih izgleda.

Kako vam pomaže? Za razliku od tradicionalnih metoda izgleda koje vam omogućuju samo postavljanje elemenata u retke ili stupce, CSS mreža nudi vam najbolje od oba svijeta—2D pristup koji koristi retke i stupce.

Mrežni spremnici i predmeti

Svojstva CSS mreže možete primijeniti na dvije glavne vrste elemenata: roditelj i djecu. Kada postavite svojstvo prikaza na "grid" za nadređeni element, ono pretvara taj element u spremnik rešetke. Svaki podređeni element unutar ovog spremnika mreže postaje stavka mreže, nasljeđujući primijenjena svojstva mreže.

Evo kako je predstavljeno:

Stavka rešetke također može postati spremnik mreže. Sada se možete odnositi na izgled kao na ugniježđenu rešetku—mrežu unutar mreže. Glavni mrežni spremnik sada se naziva vanjska rešetka, dok rešetkasti spremnik predmeta postaje unutarnja rešetka.

Svaka od ovih mreža radi neovisno o drugoj, što znači da svojstva postavljena za unutarnju mrežu ne utječu na izgled vanjske mreže, i obrnuto.

Evo kako to izgleda:

Ovladavanje odnosom između mrežnih spremnika i predmeta ključno je za izgradnja dvodimenzionalnih rasporeda učinkovito.

Imajte na umu da postoje svojstva rešetke za mrežne spremnike, dok su druga za stavke rešetke.

Mrežne linije i staze

Prije nego počnete koristiti CSS rešetku, dva su ključna pojma s kojima biste se trebali upoznati:

1. Rešetke: Rešetke se odnose na vodoravne i okomite linije koje tvore rešetku u CSS rasporedu mreže. Oni određuju početne i završne točke redaka i stupaca, pomažući organizirati gdje stvari idu na mreži. Ove linije su poput rubova kutija; imaju brojeve koji vam pomažu da referencirate elemente prilikom pozicioniranja. Ovdje ih predstavlja crvena isprekidana linija:
2. Mrežne staze: To su praznine između linija mreže koje definiraju retke i stupce. Oni su poput građevnih blokova rasporeda mreže. Na gornjoj slici obojeno područje unutar svake stavke predstavlja stazu mreže.

Zamislite mrežne linije i staze kao građevne blokove rasporeda rešetke, poput linija na listu papira za crtanje. Kada se vodoravna linija rešetke siječe s okomitom linijom rešetke, formira ćeliju u obliku kutije. Ove ćelije djeluju kao spremnici u koje možete smjestiti svoje mrežne stavke.

Svojstva CSS mrežnog spremnika

Ovo su svojstva koja možete primijeniti na mrežni spremnik kako biste organizirali izgled i pomogli u pozicioniranju elemenata unutar njega. Kao što je ranije spomenuto, jedno od njih je svojstvo prikaza postavljeno na rešetku. Evo još:

Predložak mreže

Ovo svojstvo definira veličinu redaka i stupaca. Ova svojstva možete odrediti pomoću piksela, postotaka ili razlomaka (fr). Također, možete koristiti ključne riječi poput auto, minmax(), i ponoviti() za povećanje fleksibilnosti.

• grid-template-rows: Postavlja visinu redaka.
• rešetka-predložak-stupci: Definira širine stupaca.

Evo nekoliko primjera:

Korištenje piksela:

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

Korištenje postotaka:

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

Pomoću fr:

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

Korištenje ključnih riječi auto i minmax().:

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

Korištenje repeat() za dosljedno dimenzioniranje:

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

Automatski položaj i područja predložaka mreže

Automatsko postavljanje: Automatsko postavljanje je kao da dopustite mreži da odluči gdje staviti stavke. Ako ne navedete točne položaje, rešetka će automatski postaviti stavke redoslijedom kojim se pojavljuju u oznakama. Ovo je korisno kada imate mnogo stavki i želite da ravnomjerno popune mrežu.

Područja predloška mreže: Zamislite područja predloška mreže kao stvaranje izgleda pomoću imenovanih zona. To je kao da imenujete sobe na tlocrtu. Možete se pozvati na ove nazive područja kada postavljate stavke mreže. Na primjer:

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

Ovaj izgled je poput mreže s tri stupca i četiri retka. Postoje dva retka za područje glavnog sadržaja. Označena područja uključuju "zaglavlje", "bočnu traku", "sadržaj" i "podnožje". U sljedećim odjeljcima naučit ćete kako koristiti te oznake područja u svojstvima svake stavke mreže.

Poravnanje u CSS mreži

Svojstva poravnanja možete koristiti za kontrolu pozicioniranja stavki mreže unutar njihovih ćelija mreže. Svojstva su:

• justify-items: Kontrolira horizontalno poravnanje stavki unutar njihove mrežne ćelije.
  • Vrijednosti: početak, kraj, centar i rastezanje.
• align-items: Kontrolira okomito poravnanje stavki unutar njihove mrežne ćelije.
  • Vrijednosti: početak, kraj, centar i rastezanje.
• opravdati-sadržaj: Poravnava cijelu rešetku unutar spremnika duž vodoravne osi.
  • Vrijednosti: početak, kraj, centar, rastezanje, razmak između, razmak okolo i razmak ravnomjerno.
• poravnati sadržaj: Poravnava cijelu rešetku unutar spremnika duž okomite osi.
  • Vrijednosti: početak, kraj, centar, rastezanje, razmak između, razmak okolo i razmak ravnomjerno.

Evo primjera:

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

U ovom primjeru, stavke će biti centrirane vodoravno i okomito unutar svojih ćelija. Prostor će biti ravnomjerno raspoređen između stupaca cijele rešetke, a rešetka će se centrirati okomito u spremniku.

Grid Gap

Razmak mreže odnosi se na prostor između redaka i stupaca u rasporedu mreže. Pomaže stvoriti vizualno odvajanje i dodaje prostor između stavki mreže.

The grid-gap Svojstvo vam omogućuje da postavite razmak između redaka i stupaca. Možete koristiti različite jedinice za definiranje, kao što su pikseli (px), postoci (%), em jedinice (em) i još mnogo toga.

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

U ovom primjeru, spremnik rešetke ima dva stupca s razmakom od 20 piksela između njih. Ovaj razmak vizualno odvaja stupce i poboljšava izgled.

Svojstva stavke CSS mreže

Evo nekih ključnih svojstava koja kontroliraju ponašanje pojedinačnih stavki rešetke unutar CSS rasporeda rešetke, zajedno s primjerima:

grid-row-start i grid-row-end:

• Definira početne i završne linije retka za stavku.
• Vrijednosti mogu biti brojevi redaka, "span n" ili "auto".

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

Ovaj kod mjesta Stavka mreže 1 od linije drugog reda do linije četvrtog reda.

grid-column-start i grid-column-end:

• Definira početne i završne retke stupaca za stavku.
• Vrijednosti mogu biti brojevi redaka, "span n" ili "auto".

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

Ovaj kod mjesta Stavka mreže 2 od retka prvog stupca do retka trećeg stupca.

grid-area:

• Određuje veličinu i položaj stavke rešetke unutar rešetke upućivanjem na imenovane linije rešetke u grid-template-areas.
• Kao što je ranije spomenuto, unaprijed definirana imena područja već se koriste s grid-template-areas vlasništvo. Evo primjera kako ga koristiti zajedno s grid-area.

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

Evo rezultata:

opravdati se:

• Vodoravno poravnava pojedinačne stavke unutar ćelije.
• Vrijednosti mogu biti početak, kraj, središte i rastezanje.

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

Ovaj kod vodoravno centrira Stavka mreže 5 unutar svoje ćelije.

poravnati se:

• Poravnajte pojedinačne stavke okomito unutar ćelije.
• Vrijednosti mogu biti početak, kraj, središte i rastezanje.

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

Ovaj kod se usklađuje Stavka mreže 1 do dna svoje ćelije.

Slobodno kombinirajte i prilagodite ova svojstva kako biste stvorili raspored i izgled koji želite za svaku stavku mreže u vašoj CSS mreži.

Stvaranje responzivnih izgleda pomoću CSS rešetki

Korištenje CSS rešetki za stvaranje responzivnih izgleda važno je osigurati da se vaša web stranica neprimjetno prilagođava različitim veličinama zaslona i uređajima. Možete primijeniti ove metode:

• Medijski upiti: Možete koristiti medijske upite za primjenu različitih izgleda rešetke ovisno o veličini zaslona. Na primjer, možda ćete morati promijeniti raspored stavki mreže ili prilagoditi širine stupaca za manje zaslone.
• Fleksibilne jedinice: Koristite relativne jedinice kao što su postoci i fr kako biste omogućili prilagodbu stavki mreže i stupaca proporcionalno raspoloživom prostoru.
• minmax(): Koristiti minmax() funkciju za određivanje raspona veličina za stupce ili retke rešetke. Osigurava da se stavke neće pojaviti premale ili prevelike na različitim zaslonima.

Ne zaboravite prilagoditi stupce i druge elemente poput razmaka između stavki rešetke, veličine fonta i margina. Osigurava dosljedan i dobro dizajniran izgled koji dobro funkcionira na različitim uređajima.

Istražite mogućnosti CSS rasporeda rešetki

Prihvaćanje fleksibilnosti i snage CSS mreže omogućit će vam izradu izgleda koji ne samo da izgledaju sjajno, već se i neprimjetno prilagođavaju zahtjevima modernog web dizajna. Dakle, uronite u svijet gridova, istražite mogućnosti i unaprijedite svoje vještine web razvoja.

Dok ulazite u sustave izgleda, možda ćete htjeti usporediti druge metode izgleda sa CSS rešetkama. To možete učiniti pomoću CSS Flexbox modula. To će vam pomoći da naučite odlučivati ​​kada radite na projektu.