Sva direktna djeca (child elementi) su sada stavke mreže.

U web pretraživaču nećete vidjeti

nikakvu razliku u načinu na koji se ove stavke prikazuju prije nego što ih pretvorite u
mrežu, jer je grid kreirao mrežu jedne kolone za stavke. U ovom trenutku, možda će vam
biti korisno raditi sa Grid Inspector-om, dostupnim kao dio Firefoxovih Developer Tools-
a. Ako pogledate ovaj primjer u Firefoxu i pregledate mrežu, vidjet ćete malu ikonu pored
vrijednosti grid. Kliknite na ovo i tada će mreža na ovom elementu biti prekrivena u prozoru
pretraživača.

Slika 3.1.5. Grid Inspector

Mrežne staze

Definiramo redove i stupce na mreži sa svojstvima grid-template-columns i grid-template-

rows. Oni definiraju staze mreže. Mrežna staza je prostor između bilo koje dvije linije na
mreži. Na slici 3.1.6. možete vidjeti označenu stazu – ovo je prvi red staze u našoj mreži.

13
 Slika 3.1.6. Grid sa označenom stazom

Ranijem primjeru može se dodati dodavanjem grid-template-columns svojstva, a zatim

definiranjem veličine tragova kolone. Sada je kodom prikazanim na slici 3.1.7. kreirana
mreža sa tri kolone širine 200 piksela koja je prikazana na slici 3.1.8. Child elementi će biti
raspoređeni na ovoj mreži po jedan u svaku ćeliju mreže.

Slika 3.1.7. Kod za dodavanje tri kolone širine 200 piksela

Slika 3.1.8. Grid sa tri kolone širine 200 piksela

Staze se mogu definirati korištenjem bilo koje jedinice dužine. Grid također uvodi dodatnu
jedinicu dužine koja pomaže da se kreiraju fleksibilne mrežne staze. Nova fr jedinica
predstavlja dio dostupnog prostora u mrežnom kontejneru. Sljedeća definicija mreže
stvorila bi tri trake jednake širine koje rastu i smanjuju se u skladu s raspoloživim
prostorom. Na slici 3.1.10 se jasni vidi razlika u odnosu na slicku 3.1.8.

Slika 3.1.9. Primjer korištenja fr jedinice

14