Flexbox vs Grid - Kako izraditi najčešće HTML izglede

Postoji toliko sjajnih CSS resursa po cijelom Internetu. Ali što ako želite samo jednostavan izgled i želite ga SADA?

U ovom članku opisujem 5 najčešćih izgleda web stranica i kako ih izraditi koristeći Flexbox i Grid.

Kako će ovo funkcionirati

Ispod svakog izgleda nalazi se veza za puni HTML i CSS kôd na CodePenu.

Imajte na umu da za izradu definicija stilova koristim SASS, pa ako želite to učiniti i na lokalnom jeziku, instalirajte SASS koristeći:

npm i sass -g 

Osnovni predložak kartice

Gornju sam karticu koristio kao osnovu izgleda web stranice. Sastoji se od tri elementa u okomitom smjeru, tako da bi normalni divblokovi dobro funkcionirali. Međutim, morat ću kasnije učiniti da se srednji element - odlomak teksta - rasteže.

Ovdje i Flexbox i Grid posao rade bez problema. Više volim Flexbox jer mi je jednostavniji.

Pobjednik: Flexbox

CodePen Flexbox, CodePen Grid

Sada krenimo s izradom različitih izgleda.

# 1 Okomito i vodoravno centrirana karta

S Flexboxom nam je potreban jedan element koji se centrira vodoravno, a drugi (podređeni element) koji se centrira okomito.

Redoslijed predmeta definiran je pomoću flex-direction. Način na koji se element postavlja u raspoloživom prostoru postavlja se align-selfna elementu ili align-itemsna njegovom roditelju.

S Gridom trebamo tri stupca i tri retka. Zatim karticu postavimo u srednju ćeliju.

Horizontalno centriranje je jednostavno. Definiramo tri stupca i njihove veličine pomoću kojih grid-template-columns: auto 33% autobi karta trebala biti široka do 1/3 vidljivog područja.

Problem je u tome što ne znamo okomite dimenzije. Želimo da gornji i donji redovi zauzimaju preostali prostor što s mrežom nije moguće. Kartica je centrirana, ali njena visina ovisi o visini prozora.

Međutim, to možemo riješiti dodatnim elementom za omatanje kartice i centrirati je pomoću margin.

Pobjednik: Flexbox

CodePen Flexbox, CodePen Grid

# 2 Dvije karte okomito i vodoravno centrirane

Često moramo centrirati više od samo jednog elementa. Ove dvije kartice također bi trebale održavati jednaku visinu ako jedna ili druga sadrži dulji tekst.

S Flexboxom moramo obje kartice zamotati u drugi element i njime centrirati obje kartice odjednom.

Ovdje ne možemo koristiti align-itemsjer se to u ovom slučaju odnosi na Y-os. Moramo definirati kako preostali prostor na X-osi treba razdijeliti s justify-content: center. To osigurava da su obje karte vodoravno centrirane.

Ako izostavimo problem mreže s promjenjivom visinom, možemo postići isti rezultat čak i bez dodatnih elemenata za omatanje. Ovaj put mrežu definiramo s pet stupaca s grid-template-columns: auto 33% 50px 33% auto. Ostatak ostaje isti kao u prethodnom primjeru.

Pobjednik: Flexbox

CodePen Flexbox, CodePen Grid

# 3 Više kartica iste širine i visine

Ovo je još jedan tipičan slučaj upotrebe blogova, web lokacija e-trgovine ili općenito bilo koje web stranice koja prikazuje neku vrstu popisa. Želimo da kartice imaju jednaku širinu i visinu. Iz najvišeg elementa na popisu treba zaključiti o visini.

To se može učiniti u Flexboxukoristeći flex-wrap: wrap. Elementi će se prebaciti u sljedeći redak ako njihova širina premašuje preostali prostor svakog retka. Međutim, ista visina sačuvana je samo u opsegu pojedinog retka, osim ako je izričito ne definirate.

Mrežaovdje pokazuje svoju pravu snagu. Ovaj se raspored može stvoriti pomoću grid-auto-rows: 1frkojeg se u svim redovima primjenjuje jednaka visina.

Pobjednik: Grid

CodePen Flexbox, CodePen Grid

# 4 Izmjena teksta i slika okomito i vodoravno centrirano

U ovom primjeru imamo tekst s CTA gumbima popraćen slikom na drugoj strani. Obje komponente trebaju biti okomito centrirane, jer njihova veličina može varirati.

Ovo je komad torte za Flexbox. Svaki je redak articleelement podijeljen u dva spremnika za omatanje .imgi .content. Potrebni su za ravnomjernu raspodjelu veličine ( flex-basis: 50%).

Vertikalno centriranje unutarnjeg sadržaja definirano je s align-items: center.

Izmjena se postiže okretanjem smjera Flexboxa flex-direction: row-reversena svakom neparnom članku.

Mrežalijepo rješava i ovaj slučaj upotrebe. Ne trebamo definirati jednu gigantsku mrežu, već po jednu za svaku article.

Definira jednako široke stupce koji su okomito centrirani pomoću align-items: center.

Izmjena se definira na razini stanice preklopljenim vrijednostima za grid-column.

Pobjednik: kravata

CodePen Flexbox, CodePen Grid

# 5 Horizontalno zaglavlje s izbornikom

Da bi se postigao ovaj dizajn pomoću Flexboxa, obje strane zaglavlja moraju biti predstavljene jednim elementom.

Logotip i naziv tvrtke čine jedan anchors lijeve strane, a izbornik je jedan navelement s desne strane. Flexbox ih postavlja s justify-content: space-between.

S Gridom su nam potrebna dva stupca - jedan za logotip, a drugi za izbornik. Izbornik je još jedna mreža koja ravnomjerno raspoređuje veličinu stupaca grid-template-columns: repeat(4, minmax(0, 1fr)).

Ovdje je problem u tome što ako želimo dodati još jednu stavku u izbornik, također moramo prilagoditi CSS.

Pobjednik: Flexbox

CodePen Flexbox, CodePen Grid

A pobjednik je...

Konačni rezultat je 5: 2 u korist Flexboxa, ali to ne znači da postaje konačni CSS pobjednik. Postoje situacije kada trebate koristiti jedno ili drugo, ponekad čak i jedno i drugo kako biste postigli ono što vam treba.

Ako trebate fleksibilno i uvjetno pozicioniranje, upotrijebite Flexbox. Ako želite stvoriti popise ili slične strukture koji zahtijevaju jednako velike elemente ili imaju oblik tablice, upotrijebite Grid.

Kao razvojni programer, nećete se izvući ako ne znate oboje.

Referentni vodič Flexbox, Referentni vodič Mreža

PS Ako sam propustio raspored koji svakodnevno koristite, javite mi na Twitteru i pripremit ću nastavak :-)