Recenzija: CSS Grid by Wes Bos

Recenzija: CSS Grid by Wes Bos, 2. dio

Wes Bos je poduzetnik i autor nekoliko tečajeva, među kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podučavanja odgovara neke od tečajeva sam i kupio kako bi na strukturiran način saznao i naučio nešto novo.

Redovito ih se sjetim kada me netko od kolega pita za dobre online resurse, a prema njihovim pozitivnim reakcijama zaključio sam da bi bilo dobro nešto više o tome napisati i na blogu.

Jedan od tih tečajeva je CSS Grid koji je u potpunosti besplatan, a moguće ga je pronaći na adresi https://cssgrid.io/. Sastoji se od 25 videa tj. lekcija od kojih će svaka biti detaljnije pojašnjena u nastavku.

Prvi dio blog posta objavljen pod naslovomRecenzija: CSS Grid by Wes Bos, 1. dio“.

11.) Spanning and Placing Cardio

U ovom dijelu tečaja cilj je ponoviti sve do sada obrađeno tj. samostalno napraviti primjer stranice sa zadanim rasmještajem elemenata.

Ovdje je poželjno “izgubiti” nešto vremena i barem pokušati samostalno napraviti krajnje rješenje nego u startu gledati kako ti radi Wes Bos.

Krajnje rješenje izgleda kao u nastavku. Zakomentirani dijelovi su moji pokušaji prije nego sam ih ispravno napravio.

Spanning and Placing Cardio

12.) auto-fit and auto-fill

auto-fit i auto-fill koriste se za bolje upravljanje kolonama tj. stupcima grid-template-columns.

Na početku imam sljedeću situaciju

Na ekranu će to izgledati kao na slici ispod. Znači, imam pet kolona i višak praznog prostora sa desne strane ekrana. U slučaju kada znam kakav će sadržaj biti u svakoj koloni tj. kada znam koliko takvih kolona mi je potrebno da bi popunio cijeli red onda mogu koristiti nešto kao grid-template-columns: repeat(5, 100px).

auto-fit i auto-fill

Međutim ako nisam siguran kakav će mi biti sadržaj u svakoj koloni niti koliko njih mi je potrebno da popunim cijeli red, a ipak želim da cijeli red bude dinamički popunjen mogu koristiti npr. grid-template-columns: repeat(auto-fill, 100px) tj. grid-template-columns: repeat(auto-fit, 100px) i rezultat će biti sljedeći

auto-fit i auto-fill

Gledajući gornju sliku lako se može zaključiti da ne postoji razlika između auto-fit i auto-fill, međutim razlika postoji i može se vidjeti kada nema dovoljno kolona da popune cijeli red.

auto-fit završava red iza zadnje kolone – vidljivo po punoj okomitoj liniji na kraju zadnje kolone što označava explicit grid pojašnjen u prethodnom blog postu.

auto-fit i auto-fill

auto-fill kreira prazne kolone u preostalom prostoru. U te je kolone moguće postaviti novi sadržaj.

auto-fit i auto-fill

Npr. mogu dodati jednu kolonu u krajnji desni rub ekrana.

auto-fit i auto-fill

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, Ionic Framework, ExpressJS

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *