Există atât de multe resurse CSS excelente pe internet. Dar dacă vrei doar un aspect simplu și îl vrei ACUM?

În acest articol, descriu cele mai comune 5 aspecte de pagini web și cum să le construiți utilizând atât Flexbox, cât și Grid.

Cum va funcționa acest lucru

Există un link sub fiecare aspect pentru codul HTML și CSS complet pe CodePen.

Rețineți că folosesc SASS pentru compunerea definițiilor stilului, așa că, dacă doriți să faceți același lucru și la nivel local, instalați SASS folosind:

npm i sass -g

Șablon de bază pentru card

Flexbox vs Grid Cum sa construiti cele mai frecvente

Am folosit cardul de mai sus ca bază a aspectului paginii web. Este compus din trei elemente într-o direcție verticală, atât de normală div blocurile ar funcționa bine. Cu toate acestea, mai târziu va trebui să fac elementul de mijloc – paragraful textului – să se întindă.

Aici Flexbox și Grid fac treaba perfect. Prefer Flexbox, pentru că este mai simplu pentru mine.

Câștigător: Flexbox

CodePen Flexbox, Grila CodePen

Acum să începem să creăm diferitele noastre machete.

# 1 Card centrat vertical și orizontal

1612140309 57 Flexbox vs Grid Cum sa construiti cele mai frecvente

Cu Flexbox, avem nevoie de un element care se centrează pe orizontală și un altul (elementul copil) care se centrează pe verticală.

Ordinea articolelor este definită de flex-direction. Modul în care elementul se poziționează în spațiul disponibil este stabilit de align-self pe element sau align-items pe părintele său.

Cu Grid, avem nevoie de trei coloane și trei rânduri. Apoi poziționăm cartela în celula din mijloc.

Centrarea orizontală este ușoară. Definim trei coloane și dimensiunile lor folosind grid-template-columns: auto 33% auto deoarece cardul ar trebui să fie la fel de lat ca 1/3 din zona vizibilă.

Problema este că nu cunoaștem dimensiunile verticale. Vrem ca rândurile de sus și de jos să ocupe spațiul rămas, ceea ce nu este posibil cu grila. Cardul este centrat, dar înălțimea sa depinde de înălțimea ferestrei.

Cu toate acestea, putem rezolva acest lucru cu un element de înfășurare suplimentar în jurul cardului și îl putem centra cu ajutorul margin.

Câștigător: Flexbox

CodePen Flexbox, Grila CodePen

# 2 Două cărți centrate vertical și orizontal

1612140309 582 Flexbox vs Grid Cum sa construiti cele mai frecvente

Adesea trebuie să centrăm mai mult decât un singur element. Aceste două cărți ar trebui să mențină, de asemenea, aceeași înălțime dacă una sau alta conține text mai lung.

Cu Flexbox, trebuie să înfășurăm ambele cărți într-un alt element și să le folosim pentru a centra ambele cărți simultan.

Nu putem folosi align-items aici, așa cum se aplică axei Y în acest caz. Trebuie să definim modul în care ar trebui distribuit spațiul rămas pe axa X. justify-content: center. Acest lucru asigură că ambele cărți sunt centrate orizontal.

Dacă omitem problema înălțimii variabile a Gridului, putem obține același rezultat chiar și fără elemente de împachetare suplimentare. De data aceasta definim grila cu cinci coloane cu grid-template-columns: auto 33% 50px 33% auto. Restul rămâne la fel ca în exemplul anterior.

Câștigător: Flexbox

CodePen Flexbox, Grila CodePen

# 3 carduri multiple cu aceeași lățime și înălțime

1612140309 3 Flexbox vs Grid Cum sa construiti cele mai frecvente

Acesta este un alt caz de utilizare tipic pentru bloguri, site-uri de comerț electronic sau, în general, pentru orice site care afișează un fel de listare. Vrem ca cărțile să aibă aceeași lățime și înălțime. Înălțimea trebuie dedusă din cel mai mare element din listă.

Acest lucru se poate face în Flexbox folosind flex-wrap: wrap. Elementele se vor înfășura la următoarea linie dacă lățimea lor depășește spațiul rămas al fiecărei linii. Cu toate acestea, aceeași înălțime este păstrată numai în scopul unei singure linii, cu excepția cazului în care o definiți în mod explicit.

1612140310 306 Flexbox vs Grid Cum sa construiti cele mai frecvente

Grilă își arată adevărata sa putere aici. Acest aspect poate fi creat folosind grid-auto-rows: 1fr care impune aceeași înălțime pe toate rândurile.

Câștigător: Grid

CodePen Flexbox, Grila CodePen

# 4 Alternând text și imagini centrate vertical și orizontal

1612140310 890 Flexbox vs Grid Cum sa construiti cele mai frecvente

În acest exemplu, avem text cu butoane CTA însoțite de o imagine pe cealaltă parte. Ambele componente ar trebui să fie centrate vertical, deoarece dimensiunea lor poate varia.

Aceasta este o bucată de tort pentru Flexbox. Fiecare rând este un article element împărțit în două recipiente de ambalare, .img și .content. Sunt necesare pentru distribuirea uniformă a mărimii (flex-basis: 50%).

Centrarea verticală a conținutului interior este definită de align-items: center.

Alternanța se realizează prin inversarea direcției Flexbox cu flex-direction: row-reverse pe fiecare articol ciudat.

Grilă gestionează și acest caz de utilizare. Nu este nevoie să definim o grilă uriașă, ci mai degrabă una pentru fiecare article.

Define coloane la fel de largi care sunt centrate vertical folosind align-items: center.

Alternanța este definită la nivelul celulei prin valori comutate pentru grid-column.

Câștigător: egalitate

CodePen Flexbox, Grila CodePen

# 5 Antet orizontal cu meniu

1612140310 568 Flexbox vs Grid Cum sa construiti cele mai frecvente

Pentru a realiza acest design folosind Flexbox, ambele părți ale antetului trebuie să fie reprezentate printr-un singur element.

1612140310 410 Flexbox vs Grid Cum sa construiti cele mai frecvente

Sigla și numele companiei formează una anchor în stânga, iar meniul este unic nav element din dreapta. Flexbox le poziționează cu justify-content: space-between.

1612140310 583 Flexbox vs Grid Cum sa construiti cele mai frecvente

Cu Grid, avem nevoie de două coloane – una pentru siglă și cealaltă pentru meniu. Meniul este o altă grilă care distribuie dimensiunea coloanelor în mod egal folosind grid-template-columns: repeat(4, minmax(0, 1fr)).

Problema aici este că, dacă dorim să adăugăm un alt element la meniu, trebuie să reglăm și CSS.

Câștigător: Flexbox

CodePen Flexbox, Grila CodePen

Si castigatorul este…

Scorul final este 5: 2 în favoarea Flexbox, dar acest lucru nu înseamnă că devine câștigătorul CSS final. Există situații în care trebuie să folosești una sau alta, uneori chiar amândouă împreună, pentru a realiza ceea ce ai nevoie.

Dacă aveți nevoie de poziționare flexibilă și condiționată, utilizați Flexbox. Dacă doriți să creați listări sau structuri similare care necesită elemente de dimensiuni egale sau au un formular de tabel, utilizați Grid.

Ca dezvoltator front-end, nu veți scăpa de faptul că nu le cunoașteți pe amândouă.

Ghid de referință Flexbox, Ghid de referință Grilă

PS Dacă am ratat un aspect pe care îl folosiți zilnic, anunțați-mă Stare de nervozitate și voi pregăti o continuare 🙂