Explorați diferențele dintre aceste metode moderne de aspect CSS cu o problemă practică: alinierea coloanelor.
Când vine vorba de layout-uri CSS, cele două instrumente principale pe care le aveți la dispoziție sunt Grid și Flexbox. Deși ambele sunt minunate la crearea machetelor, ele servesc unor scopuri diferite și au puncte forte și puncte slabe diferite.
Aflați cum se comportă ambele metode de aspect și când să utilizați una peste cealaltă.
Comportamentul diferit al CSS Flexbox și Grid
Pentru a ajuta la vizualizarea lucrurilor, creați un index.html fișier în folderul preferat și lipiți în următorul marcaj:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Ambele div-uri conțin exact aceiași copii, așa că puteți aplica un sistem diferit fiecăruia și îi puteți compara.
De asemenea, puteți vedea că HTML importă un fișier de foaie de stil numit stil.css. Creați acest fișier în același folder ca index.html și inserați următoarele stiluri în el:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Pagina ta ar trebui să arate astfel:
Acum, să-l întorc pe primul într-o coloană flexibilă, adăugați pur și simplu următorul cod în foaia de stil:
.flex-container {
display: flex;
}
Acesta este rezultatul:
The container flexibil div își prezintă acum elementele copil în coloane. Aceste coloane sunt flexibile și receptive — își adaptează lățimea în funcție de spațiul disponibil în fereastra de vizualizare. Acest comportament este unul dintre principalele concepte de bază din spatele Flexbox.
Pentru a preveni debordarea coloanelor în container flexibil, puteți folosi flex-wrap proprietate:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Dacă nu există suficient spațiu pentru ca elementele copil să se potrivească pe o linie, acestea se vor înfășura acum și vor continua pe următoarea.
Acum aplicați un aspect Grid celui de-al doilea folosind acest CSS:
.grid-container {
display: grid;
}
Nu se va întâmpla nimic numai cu declarația de mai sus, deoarece comportamentul implicit al Grid creează rânduri care se stivuiesc unul peste altul.
Pentru a comuta la afișarea unei coloane, trebuie să schimbați grid-auto-flow proprietate (care este rând în mod implicit):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Acum iată rezultatul:
Pentru a specifica numărul exact de coloane pe care îl doriți pe fiecare linie, utilizați grilă-șablon-coloane:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Această valoare creează cinci coloane cu lățime egală. Pentru a obține un comportament de împachetare similar cu Flexbox, puteți utiliza proprietăți receptive precum auto-adaptare și minim maxim:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Veți auzi adesea despre Flexbox și Grid denumite unidimensionale și, respectiv, bidimensionale. Acesta nu este totuși adevărul complet, deoarece atât Flexbox, cât și Grid pot face un sistem de layout bidimensional. O fac doar în moduri diferite, cu constrângeri diferite.
Cel mai important este modul în care puteți controla aspectul unidimensional al aspectului. Luați în considerare următoarea imagine, de exemplu:
Observați cât de consistentă este coloana Grid și cât de neuniformă este fiecare coloană din Flexbox. Fiecare rând/coloană dintr-un container flexibil este independent de celălalt. Deci, unele ar putea fi mai mari decât altele, în funcție de dimensiunea conținutului lor. Acestea sunt mai puțin ca coloane și mai mult ca blocuri independente.
Grila funcționează diferit, prin configurarea unei grile 2D cu coloane blocate în mod implicit. O coloană cu text scurt va avea aceeași dimensiune cu una cu text mult mai lung, așa cum demonstrează imaginea de mai sus.
În rezumat, CSS Grid este puțin mai structurat, în timp ce Flexbox este mai mult sistem de layout flexibil și receptiv. Aceste sisteme alternative de layout sunt bine numite!
Când să utilizați Flexbox
Doriți să vă bazați pe dimensiunea intrinsecă a fiecărei coloane/rând, așa cum este definită de conținutul acestora? Sau vrei să ai un control structurat din perspectiva părintelui? Dacă răspunsul tău este primul, atunci Flexbox este soluția perfectă pentru tine.
Pentru a demonstra acest lucru, luați în considerare un meniu de navigare orizontal. Înlocuiți marcajul din etichete cu asta:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Înlocuiți marcajul din fișierul CSS cu acesta:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Iată rezultatul:
Acum, transformați prima navigare într-un aspect flexibil și a doua într-un aspect grilă adăugând următorul CSS:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Comparați rezultatele pentru a vedea care a fost mai potrivit:
Din imaginea de mai sus, puteți vedea că Flexbox este soluția perfectă în acest caz. Aveți articole pe care doriți să le mergeți unul lângă celălalt și să le păstrați dimensiunea intrinsecă (mari sau mici în funcție de lungimea textului). Cu Grid, fiecare celulă are o lățime fixă și nu arată la fel de bine - cu link-uri de text simplu, cel puțin.
Când să utilizați grila CSS
Un loc în care Grid excelează cu adevărat este atunci când doriți să creați un sistem rigid de la părinte. Un exemplu este un set de elemente de card care ar trebui să fie la fel de largi, chiar dacă conțin cantități diferite de conținut.
Înlocuiți marcajul din interiorul etichete cu asta:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Adăugați acest CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Începeți cu un afișaj Flexbox pentru a vedea cum arată, astfel încât să îl puteți compara cu afișajul grilă. Iată rezultatul:
Observați cum ultima coloană este mai mare decât altele din cauza dimensionării sale intrinseci, ceea ce Flexbox se descurcă bine. Dar pentru a le face aceeași lățime folosind Flexbox, ar trebui să mergeți împotriva acelei dimensiuni intrinseci adăugând următoarele:
.columns > * {
flex: 1;
}
Aceasta face smecheria. Dar Grid este mai potrivit pentru cazuri ca acesta. Trebuie doar să specificați numărul de coloane și sunteți gata:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Iată rezultatul:
Un alt avantaj al utilizării Grid este că părintele controlează aspectul copiilor. Astfel, puteți adăuga și elimina elemente copil fără să vă faceți griji cu privire la ruperea aspectului.
Deci, când ar trebui să utilizați Grid sau Flexbox?
În rezumat, CSS Grid este grozav atunci când doriți un control structurat din perspectiva părintelui, cu o dimensiune egală a coloanelor, indiferent de dimensiunea conținutului său individual.
Flexbox, in schimb, este ideal atunci cand iti doresti un sistem mai flexibil bazat pe dimensionarea intrinseca a elementelor.
