Naučite CSS Grid za 5 minuta - Vodič za početnike

Izgledi rešetki temeljni su za dizajn web stranica, a CSS Grid modul najsnažniji je i najjednostavniji alat za njegovu izradu. Osobno mislim da je puno bolji nego na primjer Bootstrap (pročitajte zašto ovdje).

Modul je također dobio izvornu podršku glavnih preglednika (Safari, Chrome, Firefox, Edge), pa vjerujem da će svi front-end programeri ovu tehnologiju morati naučiti u ne tako dalekoj budućnosti.

U ovom članku provest ću vas kroz same osnove CSS Grid-a što je brže moguće. Izostavit ću sve što vas ne bi trebalo zanimati dok ne shvatite osnove.

Također sam kreirao besplatni CSS Grid tečaj. Kliknite ovdje za puni pristup

to.

Alternativno, pogledajte ovaj članak koji objašnjava što ćete naučiti tijekom tečaja:

Sad uskočimo u to!

Vaš prvi raspored mreže

Dva temeljna sastojka CSS rešetke su omot (roditelj) i

predmeta (djeca). Omotač je stvarna mreža, a stavke su sadržaj unutar rešetke.

Evo oznake za omot sa šest predmeta:

 1 2 3 4 5 6 

Da bismo svoj omot divpretvorili u mrežu , jednostavno mu prikazujemo

grid:

Ali, ovo još ništa ne čini, jer nismo definirali kako želimo da naša mreža izgleda. Jednostavno će složiti 6 div'sjedno na drugo.

Dodao sam malo stylinga, ali to nema nikakve veze sa CSS mrežom.

Stupci i redovi

Da bismo je učinili dvodimenzionalnom, trebat ćemo definirati stupce i retke. Stvorimo tri stupca i dva retka. Koristit ćemo grid-template-rowi grid-template-columnsvojstva.

Kako smo napisali tri vrijednosti za grid-template-columns, dobit ćemo tri stupca. Dobit ćemo dva retka, jer smo naveli dvije vrijednosti za grid-template-rows.

Vrijednosti diktiraju koliko široko želimo da naši stupci budu (100 piksela) i koliko visoki želimo da naši retci budu (50 piksela). Evo rezultata:

Da biste bili sigurni da pravilno razumijete odnos između vrijednosti i izgleda mreže, pogledajte i ovaj primjer.

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Pokušajte shvatiti vezu između koda i izgleda.

Evo kako se to igra:

Postavljanje predmeta

Sljedeće što ćete trebati naučiti je postavljanje predmeta na mrežu. Tu dobivate supersile, jer olakšava stvaranje izgleda.

Stvorimo mrežu 3x3, koristeći iste oznake kao i prije.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

To će rezultirati sljedećim izgledom:

Primijetite, na stranici vidimo samo mrežu 3x2, dok smo je definirali kao mrežu 3x3. To je zato što imamo samo šest predmeta kojima ćemo ispuniti mrežu. Da imamo još tri, tada bi se ispunio i najniži red.

Položaj i veličinu stavki ćemo ih usmjeriti i koristiti grid-columni grid-rowsvojstva:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

Ovdje govorimo da želimo da item1 započinje na prvoj liniji mreže i završava na liniji četvrtog stupca. Drugim riječima, zauzet će cijeli red.

Evo kako će se to igrati na ekranu:

Jeste li zbunjeni zašto imamo 4 retka stupaca kad imamo samo 3 stupca? Pogledajte ovu sliku, gdje sam crnim crtama nacrtao linije stupaca:

Primijetite da sada koristimo sve retke u mreži. Kad smo natjerali da prva stavka zauzme cijeli prvi redak, ona je ostatak stavki gurnula prema dolje.

Na kraju, želio bih pokazati jednostavniji način pisanja gornje sintakse:

Da bismo bili sigurni da ste pravilno razumjeli ovaj koncept, malo preuredimo stavke.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Evo kako to izgleda na stranici. Pokušajte se omotati glavom zašto to izgleda tako. Ne bi trebalo biti preteško.

I to je bilo to!

Hvala na čitanju! Zovem se Per Borgen, suosnivač sam Scrimbe - najlakšeg načina da naučim kodirati. Trebali biste provjeriti naš responzivni bootcamp za web dizajn ako želite naučiti graditi moderne web stranice na profesionalnoj razini.