{"id":9403,"date":"2019-03-11T06:00:09","date_gmt":"2019-03-11T04:00:09","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=9403"},"modified":"2019-04-07T22:15:42","modified_gmt":"2019-04-07T20:15:42","slug":"recenzija-css-grid-wes-bos","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/","title":{"rendered":"Recenzija: CSS Grid by Wes Bos, 1. dio"},"content":{"rendered":"

Kada su u pitanju HTML<\/em> i CSS<\/em> dosta developera voli misliti da ih zna 90%-100%, a upravo ovakvi te\u010dajevi slu\u017ee da to demantiraju.<\/p>\n

Wes Bos<\/a><\/strong> je poduzetnik i autor nekoliko te\u010dajeva, me\u0111u kojima je i ovaj o CSS Gridu<\/em>. S obzirom da mi njegov stil podu\u010davanja odgovara neke od te\u010dajeva sam i kupio kako bi na strukturiran na\u010din saznao i nau\u010dio ne\u0161to novo.<\/p>\n

Redovito ih se sjetim kada me netko od kolega pita za dobre online resurse, a prema njihovim pozitivnim reakcijama zaklju\u010dio sam da bi bilo dobro ne\u0161to vi\u0161e o tome napisati i na blogu.<\/p>\n

Jedan od tih te\u010dajeva je CSS Grid<\/strong><\/em> koji je u potpunosti besplatan, a mogu\u0107e ga je prona\u0107i na adresi https:\/\/cssgrid.io\/<\/a>. Sastoji se od 25 videa tj. lekcija<\/strong> od kojih \u0107e svaka biti detaljnije poja\u0161njena u nastavku. Trajanje snimljenog materijala je 4 sata<\/strong>, ali ako se paralelno idu raditi primjeri<\/strong> satnica \u0107e vrlo brzo rasti.<\/p>\n

\"CSS<\/a><\/p>\n

1. Introduction<\/h2>\n

U ovom dijelu Wes Bos<\/em> daje uvod u te\u010daj i nagla\u0161ava kako Firefox<\/em> stoji iza odluke da te\u010daj<\/strong> bude besplatan<\/strong> zbog \u010dega \u0107emo koristiti njihove alate u nastavku te\u010daja<\/a>.<\/p>\n

Autor tako\u0111er poti\u010de developere koji \u0107e krenuti s ovim te\u010dajem da redovito daju povratne informacije, bilo to putem dru\u0161tvenih mre\u017ea ili blogova.<\/p>\n

Osim toga, na svakome od nas ostaje odluka ho\u0107emo li ovaj te\u010daj pogledati samo da bismo mogli re\u0107i da smo ga pro\u0161li ili \u0107emo paralelno raditi primjere i tako ne\u0161to konkretno i nau\u010diti<\/strong>.<\/p>\n

2. Starter files<\/h2>\n

Preporuka ovog dijela te\u010daja je preuzeti i koristiti Firefox Quantum: Developer Edition<\/a><\/em> koji je sa svojim naprednim rje\u0161enjima prilago\u0111en upravo developerima.<\/p>\n

Sve starter<\/em> datoteke mogu\u0107e je preuzeti na adresi https:\/\/courses.wesbos.com\/account\/<\/a> nakon besplatne registracije. Za one nestrpljive datoteke se nalaze i na sljede\u0107oj poveznici https:\/\/github.com\/wesbos\/css-grid<\/a>.<\/p>\n

Nakon preuzimanja mogu\u0107e je vidjeti package.json<\/em> datoteku:<\/p>\n

{\r\n  \"name\": \"css-grid\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"start\": \"run-script-os\",\r\n    \"start:win32\": \"browser-sync start --server --files '**\/*.css, **\/*.html, **\/*.js, !node_modules\/**\/*' --directory --port 7777 --browser \\\"C:\\\\Program Files\\\\Firefox Developer Edition\\\\firefox.exe\\\"\",\r\n    \"\/\/\": \"Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition\",\r\n    \"start:darwin:linux\": \"browser-sync start --server --files '**\/*.css, **\/*.html, **\/*.js, !node_modules\/**\/*' --directory --port 7777 --browser 'Firefox Developer Edition'\"\r\n  },\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\",\r\n  \"devDependencies\": {\r\n    \"browser-sync\": \"^2.24.5\",\r\n    \"run-script-os\": \"^1.0.3\"\r\n  }\r\n}<\/pre>\n
Zbog paketa “browser-syn<\/a>c<\/em>” i “run-script-os<\/a><\/em>” potrebno je na ra\u010dunalu imati instaliran NodeJS<\/a><\/em>.<\/p>\n
Pokretanjem ove dvije naredbe instaliram ranije navedene NPM<\/em> pakete i te\u010daj mi se otvara u odabranom web pregledniku.<\/p>\n
$ npm install\r\n$ npm start<\/pre>\n
\"CSS<\/a><\/p>\n
Ovo je sada temelj svega \u0161to \u0107u u nastavku raditi.<\/p>\n
3. CSS Grid Fundamentals<\/h2>\n
Fokus ovog dijela te\u010daja je odgovor na pitanje – \u0161to je CSS Grid<\/em><\/strong>? U donjem primjeru ako smo za klasu container<\/span> rekli da je display: grid;<\/span> automatski smo sve unutarnje elemente, u ovom slu\u010daju to su <div class=”item”>1<\/div><\/span>, klasificirali kao dijelove CSS Grida<\/em>.<\/p>\n
Nakon toga ostaje podijeliti ih u redove i kolone pomo\u0107u: grid-template-columns<\/a><\/em>, grid-template-rows<\/a><\/em> i grid-gap<\/a><\/em>.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <link rel=\"stylesheet\" href=\"..\/assets\/style.css\">\r\n  <title>CSS Grid Fundamentals!<\/title>\r\n<\/head>\r\n\r\n<body>\r\n  <div class=\"container\">\r\n    <div class=\"item\">1<\/div>\r\n    <div class=\"item\">2<\/div>\r\n    <div class=\"item\">3<\/div>\r\n    <div class=\"item\">4<\/div>\r\n    <div class=\"item\">5<\/div>\r\n    <div class=\"item\">6<\/div>\r\n    <div class=\"item\">7<\/div>\r\n    <div class=\"item\">8<\/div>\r\n    <div class=\"item\">9<\/div>\r\n    <div class=\"item\">10<\/div>\r\n  <\/div>\r\n  <style>\r\n     .container{\r\n       display: grid;\r\n       \/* grid-template-columns: 200px auto 500px 50px; \r\n        grid-template-columns: repeat(5, 100px); \r\n       grid-template-columns: 200px 500px;\r\n       grid-template-rows: 200px 500px 50px;\r\n       grid-gap: 20px; *\/\r\n     }\r\n  <\/style>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
4. CSS Grid Dev Tools<\/h2>\n
Desni klik mi\u0161a tj. odabir “Inspect Elements<\/a><\/em>” vodi nas do dijela web preglednika koji je poznat svakom web developeru.<\/p>\n
Ovdje upoznajemo Grid Inspector<\/a><\/strong><\/em>.<\/p>\n
\"Grid<\/a><\/p>\n
5. CSS Grid Implicit vs Explicit Tracks<\/h2>\n
Explicit<\/strong><\/em> ozna\u010dava sve kolone (grid-template-columns<\/a><\/em>) i redove (grid-template-rows<\/a><\/em>) koje smo sami odredili tj. zadali im parametre. U ovom primjeru to su prve dvije kolone tj. prva dva reda.<\/p>\n
<body>\r\n  <div class=\"container\">\r\n    <div class=\"item\">1<\/div>\r\n    <div class=\"item\">2<\/div>\r\n    <div class=\"item\">3<\/div>\r\n    <div class=\"item\">4<\/div>\r\n    <div class=\"item\">5<\/div>\r\n    <div class=\"item\">6<\/div>\r\n    <div class=\"item\">7<\/div>\r\n    <div class=\"item\">8<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: 200px 400px;\r\n      grid-template-rows: 50px 100px;\r\n      \/* grid-auto-rows: 200px;  *\/\r\n      \/* grid-auto-columns: 100px; *\/\r\n    }\r\n  <\/style>\r\n<\/body><\/pre>\n
\"Explicit<\/a><\/p>\n
Implicit<\/strong><\/em> ozna\u010dava sve preostale kolone (grid-auto-columns<\/a><\/em>) i redove (grid-auto-rows<\/a><\/em>). U ovom primjeru to su zadnja dva, tj. blokovi 5, 6, 7 i 8.<\/p>\n
<body>\r\n  <div class=\"container\">\r\n    <div class=\"item\">1<\/div>\r\n    <div class=\"item\">2<\/div>\r\n    <div class=\"item\">3<\/div>\r\n    <div class=\"item\">4<\/div>\r\n    <div class=\"item\">5<\/div>\r\n    <div class=\"item\">6<\/div>\r\n    <div class=\"item\">7<\/div>\r\n    <div class=\"item\">8<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: 200px 400px;\r\n      grid-template-rows: 50px 100px;\r\n      grid-auto-rows: 70px;\r\n      \/* grid-auto-columns: 100px; - u sljede\u0107em dijelu te\u010daja*\/\r\n    }\r\n  <\/style>\r\n<\/body><\/pre>\n
\"Implicit<\/a><\/p>\n
Zaklju\u010dno, u sljede\u0107em primjeru explicit<\/em> su nam kolone dok su redovi implicit<\/em> jer njih nigdje nismo definirali, a svejedno ih imamo.<\/p>\n
<body>\r\n  <div class=\"container\">\r\n    <div class=\"item\">1<\/div>\r\n    <div class=\"item\">2<\/div>\r\n    <div class=\"item\">3<\/div>\r\n    <div class=\"item\">4<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: 200px 400px;\r\n    }\r\n  <\/style>\r\n<\/body><\/pre>\n
\"CSS<\/a><\/p>\n
6. CSS Grid Auto Flow<\/h2>\n
U ovom dijelu te\u010daja poja\u0161njen je grid-auto-flow<\/a><\/em><\/strong> pomo\u0107u kojega odre\u0111ujemo ho\u0107e li implicitno kreirani elementi biti prikazani kao redovi ili stupci<\/strong>.<\/p>\n
U startu dodajemo dva elementa i za njih definiramo dva stupca.<\/p>\n
<body>\r\n  <div class=\"container\">\r\n    <div class=\"item\">1<\/div>\r\n    <div class=\"item\">2<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: 400px 200px;\r\n    }\r\n  <\/style>\r\n<\/body><\/pre>\n
\"CSS<\/a><\/p>\n
Me\u0111utim, ako dodamo nekoliko novih elemenata koje nismo eksplicitno odredili pitanje je gdje \u0107e se oni prikazati.<\/p>\n
Zadano \u0107e biti prikazani kao redovi,<\/p>\n
<body>\r\n  <div class=\"container\">\r\n    <div class=\"item\">1<\/div>\r\n    <div class=\"item\">2<\/div>\r\n    <div class=\"item\">3<\/div>\r\n    <div class=\"item\">4<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: 400px 200px;\r\n      grid-auto-flow: row;\r\n    }\r\n  <\/style>\r\n<\/body><\/pre>\n
\"CSS<\/a><\/p>\n
a mo\u017eemo ih prikazati i kao stupce.<\/p>\n
<body>\r\n  <div class=\"container\">\r\n    <div class=\"item\">1<\/div>\r\n    <div class=\"item\">2<\/div>\r\n    <div class=\"item\">3<\/div>\r\n    <div class=\"item\">4<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: 400px 200px;\r\n      grid-auto-flow: column;\r\n    }\r\n  <\/style>\r\n<\/body><\/pre>\n
\"CSS<\/a><\/p>\n
Zaklju\u010dno, na taj se na\u010din mo\u017ee napraviti horizontalni scroll<\/em><\/a>.<\/p>\n
\"CSS<\/a><\/p>\n
7. Sizing tracks in CSS Grid<\/h2>\n
Ovdje se upoznajemo s fr<\/strong><\/em> (fractional unit<\/em>) jedinicom koja ozna\u010dava preostali slobodan prostor na ekranu.<\/p>\n
Ako definiramo tri stupca na sljede\u0107i na\u010din<\/p>\n
<style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      border: 10px solid var(--yellow);\r\n      grid-template-columns: 150px 150px 1fr;\r\n    }\r\n <\/style><\/pre>\n
prva dva \u0107e biti \u0161iroka 150px dok \u0107e zadnji biti \u0161irok koliko god je ostalo vi\u0161ka prostora.<\/p>\n
Fr<\/em><\/strong> (fractional unit<\/em>) uzima u obzir grid-gap<\/span> tako da na\u0161i stupci prikazuju u prostoru koji ostane nakon \u0161to se zauzme grid-gap<\/span>.<\/p>\n
\"Sizing<\/a><\/p>\n
Isto tako, mogu\u0107e je koristiti i parametar auto<\/span>.<\/p>\n
Donji primjer ozna\u010dava prvi stupac \u010dija je \u0161irina odre\u0111ena kao auto<\/span> \u0161to zna\u010di da \u0107e on biti \u0161irok koliko i sadr\u017eaj unutar njega dok \u0107e drugi stupac uzeti preostali prostor 1fr<\/span>.<\/p>\n
<style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      border: 10px solid var(--yellow);\r\n      grid-template-columns: auto 1fr;\r\n    }\r\n<\/style><\/pre>\n
\"Sizing<\/a><\/p>\n
8. CSS Grid repeat function<\/h2>\n
Sve navedeno ranije mo\u017ee se napraviti na jednostavniji na\u010din koriste\u0107i repeat()<\/a><\/strong><\/em> funkciju. Npr. umjesto definiranja \u010detiri stupca na standardni na\u010din<\/p>\n
grid-template-columns: 1fr 1fr 1fr 1fr;<\/pre>\n
mo\u017eemo ih definirati na sljede\u0107i na\u010din gdje prva vrijednost ozna\u010dava koliko puta je taj element potrebno ponoviti, a druga vrijednost ozna\u010dava \u0161irinu.<\/p>\n
grid-template-columns: repeat(4, 1fr);<\/pre>\n
Rezultat \u0107e biti isti tj. imati \u0107emo \u010detiri stupca jednake \u0161irine.<\/p>\n
\"CSS<\/a><\/p>\n
Mogu se raditi i naprednije stvari. Npr. prvi stupac \u0107e biti \u0161irok 100px dok \u0107e od preostalih osam jedan biti 1fr<\/span>, drugi 2fr<\/span>, tre\u0107i 1fr<\/span>,…<\/p>\n
<style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: 100px repeat(4, 1fr 2fr);\r\n    }\r\n<\/style><\/pre>\n
\"CSS<\/a><\/p>\n
9. Sizing Grid Items<\/h2>\n
U ovom dijelu fokus je na pojedina\u010dnim elementima kompletnog grida, <div class=”item item1″>1<\/div><\/span>.<\/p>\n
Ako napravimo sljede\u0107e dobit \u0107emo pet stupaca koji su raspore\u0111eni tako da zauzimaju sav slobodan prostor.<\/p>\n
<body>\r\n  <div class=\"container\">\r\n         <div class=\"item item1\">1<\/div>\r\n         <div class=\"item item2\">2<\/div>\r\n         <div class=\"item item3\">3<\/div>\r\n         <div class=\"item item4\">4<\/div>\r\n         <div class=\"item item5\">5<\/div>\r\n         <div class=\"item item6\">6<\/div>\r\n         <div class=\"item item7\">7<\/div>\r\n         <div class=\"item item8\">8<\/div>\r\n         <div class=\"item item9\">9<\/div>\r\n         <div class=\"item item10\">10<\/div>\r\n         <div class=\"item item11\">11<\/div>\r\n         <div class=\"item item12\">12<\/div>\r\n         <div class=\"item item13\">13<\/div>\r\n         <div class=\"item item14\">14<\/div>\r\n         <div class=\"item item15\">15<\/div>\r\n         <div class=\"item item16\">16<\/div>\r\n         <div class=\"item item17\">17<\/div>\r\n         <div class=\"item item18\">18<\/div>\r\n         <div class=\"item item19\">19<\/div>\r\n         <div class=\"item item20\">20<\/div>\r\n         <div class=\"item item21\">21<\/div>\r\n         <div class=\"item item22\">22<\/div>\r\n         <div class=\"item item23\">23<\/div>\r\n         <div class=\"item item24\">24<\/div>\r\n         <div class=\"item item25\">25<\/div>\r\n         <div class=\"item item26\">26<\/div>\r\n         <div class=\"item item27\">27<\/div>\r\n         <div class=\"item item28\">28<\/div>\r\n         <div class=\"item item29\">29<\/div>\r\n         <div class=\"item item30\">30<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: repeat(5, 1fr);\r\n    }\r\n \/*.item17{\r\n      background: mistyrose;\r\n      grid-column: span 2;\r\n      grid-row: span 2;\r\n    } *\/\r\n  <\/style>\r\n<\/body><\/pre>\n
\"Sizing<\/a><\/p>\n
Pomo\u0107u parametara grid-column<\/a><\/em><\/strong> i grid-row<\/a><\/em><\/strong> mo\u017eemo zadati visinu odnosno \u0161irinu pojedinog elementa, neka to sada bude .item17<\/span>. Ostali elementi se automatski repozicioniraju.<\/p>\n
Pomo\u0107u grid-column: span 2;<\/span> odre\u0111ujemo \u0161irinu<\/strong>.<\/p>\n
\"Sizing<\/a><\/p>\n
Pomo\u0107u grid-row: span 2;<\/span> odre\u0111ujemo visinu<\/strong>.<\/p>\n
\"Sizing<\/a><\/p>\n
Ako ih koristimo zajedno odre\u0111ujemo visinu i \u0161irinu<\/strong>.<\/p>\n
.item17{\r\n   background: mistyrose;\r\n   grid-column: span 2;\r\n   grid-row: span 2;\r\n}<\/pre>\n
\"Sizing<\/a><\/p>\n
U primjeru na slici iznad odredili smo visinu i \u0161irinu jednog elementa dok su se ostali automatski poslo\u017eili na svoje nove pozicije.<\/p>\n
U nastavku se mo\u017ee vidjeti primjer kada odabranom elementu zadajemo mjesto po\u010detka i mjesto zavr\u0161etka.<\/p>\n
.item17{\r\ngrid-column: span 2;\r\n    grid-column-start: span 2;\r\n    grid-column-end: auto;\r\ngrid-row: span 2;\r\n    grid-row-start: span 2;\r\n    grid-row-end: auto;\r\n}<\/pre>\n
10. Placing Grid Items<\/h2>\n
Po\u010detni raspored svih elemenata izgleda ovako i ovdje \u0107e fokus biti na pozicioniranju elementa s klasom .poop<\/span>.<\/p>\n
<body>\r\n  <div class=\"container\">\r\n    <div class=\"item item1\">1<\/div>\r\n    <div class=\"item item2\">2<\/div>\r\n    <div class=\"item item3\">3<\/div>\r\n    <div class=\"item item4\">4<\/div>\r\n    <div class=\"item item5\">5<\/div>\r\n    <div class=\"item item6\">6<\/div>\r\n    <div class=\"item item7\">7<\/div>\r\n    <div class=\"item item8\">8<\/div>\r\n    <div class=\"item poop\">\ud83d\udca9<\/div>\r\n    <div class=\"item item9\">9<\/div>\r\n    <div class=\"item item10\">10<\/div>\r\n    <div class=\"item item11\">11<\/div>\r\n    <div class=\"item item12\">12<\/div>\r\n    <div class=\"item item13\">13<\/div>\r\n    <div class=\"item item14\">14<\/div>\r\n    <div class=\"item item15\">15<\/div>\r\n    <div class=\"item item16\">16<\/div>\r\n    <div class=\"item item17\">17<\/div>\r\n    <div class=\"item item18\">18<\/div>\r\n    <div class=\"item item19\">19<\/div>\r\n    <div class=\"item item20\">20<\/div>\r\n    <div class=\"item item21\">21<\/div>\r\n    <div class=\"item item22\">22<\/div>\r\n    <div class=\"item item23\">23<\/div>\r\n    <div class=\"item item24\">24<\/div>\r\n    <div class=\"item item25\">25<\/div>\r\n    <div class=\"item item26\">26<\/div>\r\n    <div class=\"item item27\">27<\/div>\r\n    <div class=\"item item28\">28<\/div>\r\n    <div class=\"item item29\">29<\/div>\r\n    <div class=\"item item30\">30<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .container {\r\n      display: grid;\r\n      grid-gap: 20px;\r\n      grid-template-columns: repeat(5, 1fr);\r\n    }\r\n    .poop {\r\n      background: #BADA55;\r\n    }\r\n  <\/style>\r\n<\/body><\/pre>\n
\"Placing<\/a><\/p>\n
Na ovaj na\u010din odre\u0111ujem startnu poziciju odabranog elementa.<\/p>\n
.poop {\r\n      background: #BADA55;\r\n      grid-column-start: 2;\r\n}<\/pre>\n
\"Placing<\/a><\/p>\n
Sada \u0107u uz mjesto po\u010detka odabranom elementu zadati i mjesto zavr\u0161etka.<\/p>\n
To mogu napraviti pojedina\u010dno za po\u010detak i zavr\u0161etak.<\/p>\n
.poop {\r\n      background: #BADA55;\r\n      grid-column-start: 2;\r\n      grid-column-end: 5; \r\n}<\/pre>\n
A mogu i na skra\u0107eni na\u010din.<\/p>\n
.poop {\r\n      background: #BADA55; \r\n      grid-column: 2 \/ 5;\r\n}<\/pre>\n
Rezultat je isti.<\/p>\n
\"Placing<\/a><\/p>\n
Osim \u0161to odabranom elementu<\/strong> na gornji na\u010din mogu re\u0107i gdje po\u010dinje i zavr\u0161ava tako\u0111er<\/strong> mu na sljede\u0107i na\u010din mogu odrediti \u0161irinu<\/strong>.<\/p>\n
.poop {\r\n      background: #BADA55; \r\n      grid-column: span 2 \/ 5;\r\n}<\/pre>\n
\"Placing<\/a><\/p>\n
.poop {\r\n      background: #BADA55; \r\n      grid-column: 1 \/ span 2;\r\n}<\/pre>\n
\"Placing<\/a><\/p>\n
Ako \u017eelim da odabrani element uvijek po\u010dinje na prvom mjestu i zavr\u0161ava na posljednjem<\/strong> napravit \u0107u sljede\u0107e. Ovo se mo\u017ee koristiti i kao zamjena za width: 100%;<\/span><\/p>\n
.poop {\r\n      background: #BADA55; \r\n      grid-column: 1 \/ -1; \r\n}<\/pre>\n
\"Placing<\/a><\/p>\n
Isto to mo\u017eemo napraviti i kada su u pitanju redovi koriste\u0107i grid-row<\/a><\/em><\/strong>.<\/p>\n
.poop {\r\n      background: #BADA55; \r\n      grid-row: 3 \/ span 3;\r\n}<\/pre>\n
\"Placing<\/a><\/p>\n
Naravno, mogu\u0107e ih je i kombinirati.<\/p>\n
.poop {\r\n      background: #BADA55; \r\n      grid-column: 1 \/ span 2;\r\n      grid-row: 3 \/ span 3;\r\n}<\/pre>\n
\"Placing<\/a><\/p>\n
Nastavak ovog blog posta uskoro pod naslovom “Recenzija: CSS Grid by Wes Bos, 2. dio<\/em><\/strong>“.<\/p>\n","protected":false},"excerpt":{"rendered":"
Kada su u pitanju HTML i CSS dosta developera voli misliti da ih zna 90%-100%, a upravo ovakvi te\u010dajevi slu\u017ee da to demantiraju. Wes Bos je poduzetnik i autor nekoliko te\u010dajeva, me\u0111u kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podu\u010davanja odgovara neke od te\u010dajeva sam i kupio kako bi … Nastavi \u010ditati Recenzija: CSS Grid by Wes Bos, 1. dio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9405,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[566,351],"tags":[575],"class_list":["post-9403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-razvoj","tag-css-grid"],"yoast_head":"\nRecenzija: CSS Grid by Wes Bos, 1. dio - Tomislav Stankovi\u0107<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Recenzija: CSS Grid by Wes Bos, 1. dio - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"Kada su u pitanju HTML i CSS dosta developera voli misliti da ih zna 90%-100%, a upravo ovakvi te\u010dajevi slu\u017ee da to demantiraju. Wes Bos je poduzetnik i autor nekoliko te\u010dajeva, me\u0111u kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podu\u010davanja odgovara neke od te\u010dajeva sam i kupio kako bi … Nastavi \u010ditati Recenzija: CSS Grid by Wes Bos, 1. dio\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-11T04:00:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-07T20:15:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/02\/CSS-grid-wesbos-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Recenzija: CSS Grid by Wes Bos, 1. dio\",\"datePublished\":\"2019-03-11T04:00:09+00:00\",\"dateModified\":\"2019-04-07T20:15:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/\"},\"wordCount\":1137,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/CSS-grid-wesbos-min.png\",\"keywords\":[\"CSS Grid\"],\"articleSection\":[\"Frontend\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/\",\"name\":\"Recenzija: CSS Grid by Wes Bos, 1. dio - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/CSS-grid-wesbos-min.png\",\"datePublished\":\"2019-03-11T04:00:09+00:00\",\"dateModified\":\"2019-04-07T20:15:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/CSS-grid-wesbos-min.png\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/CSS-grid-wesbos-min.png\",\"width\":825,\"height\":510,\"caption\":\"Recenzija: CSS Grid by Wes Bos\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/recenzija-css-grid-wes-bos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recenzija: CSS Grid by Wes Bos, 1. dio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Recenzija: CSS Grid by Wes Bos, 1. dio - Tomislav Stankovi\u0107","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/","og_locale":"hr_HR","og_type":"article","og_title":"Recenzija: CSS Grid by Wes Bos, 1. dio - Tomislav Stankovi\u0107","og_description":"Kada su u pitanju HTML i CSS dosta developera voli misliti da ih zna 90%-100%, a upravo ovakvi te\u010dajevi slu\u017ee da to demantiraju. Wes Bos je poduzetnik i autor nekoliko te\u010dajeva, me\u0111u kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podu\u010davanja odgovara neke od te\u010dajeva sam i kupio kako bi … Nastavi \u010ditati Recenzija: CSS Grid by Wes Bos, 1. dio","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2019-03-11T04:00:09+00:00","article_modified_time":"2019-04-07T20:15:42+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/02\/CSS-grid-wesbos-min.png","type":"image\/png"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"13 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Recenzija: CSS Grid by Wes Bos, 1. dio","datePublished":"2019-03-11T04:00:09+00:00","dateModified":"2019-04-07T20:15:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/"},"wordCount":1137,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/02\/CSS-grid-wesbos-min.png","keywords":["CSS Grid"],"articleSection":["Frontend","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/","name":"Recenzija: CSS Grid by Wes Bos, 1. dio - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/02\/CSS-grid-wesbos-min.png","datePublished":"2019-03-11T04:00:09+00:00","dateModified":"2019-04-07T20:15:42+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/02\/CSS-grid-wesbos-min.png","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/02\/CSS-grid-wesbos-min.png","width":825,"height":510,"caption":"Recenzija: CSS Grid by Wes Bos"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/recenzija-css-grid-wes-bos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Recenzija: CSS Grid by Wes Bos, 1. dio"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/9403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=9403"}],"version-history":[{"count":151,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/9403\/revisions"}],"predecessor-version":[{"id":9785,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/9403\/revisions\/9785"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/9405"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=9403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=9403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=9403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}