From the course: CSS Layouts: From Float to Flexbox and Grid

Grid, grid systems, and CSS Grid - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial Buy for my team

Grid, grid systems, and CSS Grid

“

- [Instruktor] Pre nego što zaronimo u raspored CSS mreže, Hajde da pređemo na neke potencijalno zbunjujuće pojmove. mreža, mrežni sistem i CSS mreža. Mreža je u osnovi obrazac, koji koriste grafički i veb dizajneri da postroje elemente dizajna kako bi pomogli u stvaranju konzistentnog protoka i simetričnih rasporeda. Rešetke su podeljene na jednake širine i ravnomerno raspoređene kolone. Ponekad se redovi dodaju kao vodič, kako bi se komponente poredale i horizontalno. Oluci, prostor između redova ili kolona, obično se dodaju kako bi se omogućio dosledan razmak između kolona. Komponente stranice su zatim raspoređene unutar kolona i mogu se protezati preko jedne ili više kolona. Postoje različiti načini za definisanje mreže, ali uobičajeni raspored za veb stranice je da koristite mrežu jednakih kolona KSNUMKS. KSNUMKS je lako deljiv sa dva, tri, četiri i šest, što olakšava kreiranje konzistentnih responzivnih dizajna. Rasporedi zasnovani na mreži bili su uobičajeni u štampanju i veb dizajnu, pre nego što je uveden modul CSS mrežnog rasporeda. Prilikom prevođenja ovih dizajna na veb stranice, jedna tehnika je postavljanje svake komponente stranice blok po blok i njihovo dimenzionisanje u skladu s tim. Slično onome što smo radili sa našim prethodnim vežbama rasporeda. Iako nema ništa loše u ovom pristupu, stvaranje CSS mrežnog sistema, počelo je da postaje popularno, posebno za složenije rasporede. U mrežnom sistemu, kolone i oluci se ponovo kreiraju pomoću CSS-a - Gomila unapred dizajniranih CSS skupova pravila je definisana i vezana za imena klasa specifična za mrežu. Ta imena klasa se koriste za raspored komponenti stranice. Na primer, ako bih želeo da napravim komponentu koja se protezala preko četiri kolone, a drugu koja se protezala preko osam kolona, koristio bih klasu koja se zove cal-4 i cal-8. Ili nešto slično. Kako je koncept CSS mrežnih sistema rastao u popularnosti, pojavila su se mnoga rešenja nezavisnih proizvođača. Neki su ponudili osnovni CSS mrežni šablon, dok su drugi kreirali okvire u punom obimu. Jedan od najpopularnijih okvira je Bootstrap. Iako ovaj okvir uključuje unapred napisane komponente, kao što su značke, dugmad, kartice i još mnogo toga, sam okvir je izgrađen na mrežnom sistemu. Čak i pre nego što je uvedena CSS mreža, bilo je nekih prednosti i mana koje treba uzeti u obzir kada se koriste okviri nezavisnih proizvođača, kao što su naduvavanje koda ili ograničenja i prilagođavanja. Ali sada kada je CSS mreža dostupna, postalo je mnogo lakše kreirati redove i kolone sami. Nećemo pokrivati okvire na ovom kursu, ali ako planirate da ga koristite, preporučio bih da uradite neko istraživanje o I would recommend doing some research on the pros and cons of CSS frameworks, and checking to see prednostima i nedostacima CSS okvira i proverite da li je if it's been updated to the latest CSS layout techniques. ažuriran na najnovije tehnike CSS rasporeda.

Contents