Esplora le differenze tra questi moderni metodi di layout CSS con un problema pratico: allineare le colonne.

Quando si tratta di layout CSS, i due strumenti principali a tua disposizione sono Grid e Flexbox. Sebbene entrambi siano fantastici nella creazione di layout, servono a scopi diversi e hanno punti di forza e di debolezza diversi.

Scopri come si comportano entrambi i metodi di layout e quando utilizzarne uno rispetto all'altro.

Il diverso comportamento di CSS Flexbox e Grid

Per aiutare a visualizzare le cose, crea un indice.html file nella cartella preferita e incolla il seguente markup:

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>





instagram viewer

<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>

Entrambi i div contengono esattamente gli stessi figli, quindi puoi applicare un sistema diverso a ciascuno e confrontarli.

Puoi anche vedere che l'HTML importa un file di fogli di stile denominato style.css. Crea questo file nella stessa cartella di indice.html e incolla al suo interno i seguenti stili:

body {
padding: 30px;
}
h1 {
color: #A52A2A;
}


h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}

La tua pagina dovrebbe assomigliare a questa:

Ora, per girare il primo in una colonna flessibile, aggiungi semplicemente il seguente codice al tuo foglio di stile:

.flex-container {
display: flex;
}

Questo è il risultato:

IL contenitore flessibile div ora dispone i suoi elementi figlio in colonne. Queste colonne sono flessibili e reattive: adattano la loro larghezza in base allo spazio disponibile nella finestra. Questo comportamento è uno dei principali concetti di base dietro Flexbox.

Per evitare che le colonne trabocchino nel file contenitore flessibile, puoi usare il file avvolgimento flessibile proprietà:

.flex-container {
display: flex;
flex-wrap: wrap;
}

Se non c'è abbastanza spazio per gli elementi secondari per stare su una riga, ora si avvolgeranno e continueranno su quella successiva.

Ora applica un layout a griglia al secondo utilizzando questo CSS:

.grid-container {
display: grid;
}

Non accadrà nulla solo con la dichiarazione precedente perché il comportamento predefinito di Grid crea righe che si impilano una sull'altra.

Per passare alla visualizzazione a colonne, è necessario modificare il file flusso automatico della griglia proprietà (che è riga per impostazione predefinita):

.grid-container {
display: grid;
grid-auto-flow: column;
}

Ora ecco il risultato:

Per specificare il numero esatto di colonne che desideri su ciascuna riga, utilizza colonne-modello-griglia:

.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

Questo valore crea cinque colonne di uguale larghezza. Per ottenere un comportamento di avvolgimento simile a Flexbox, puoi utilizzare proprietà reattive come adattamento automatico E minimo Massimo:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}

Sentirai spesso Flexbox e Grid indicati rispettivamente come monodimensionale e bidimensionale. Questa non è tutta la verità, tuttavia, perché sia ​​Flexbox che Grid possono creare a sistema di layout bidimensionale. Semplicemente lo fanno in modi diversi, con vincoli diversi.

La cosa più importante è il modo in cui puoi controllare l'aspetto unidimensionale del layout. Consideriamo ad esempio la seguente immagine:

Osserva quanto è coerente la colonna della griglia e quanto è irregolare ciascuna colonna nel Flexbox. Ogni riga/colonna in un contenitore flessibile è indipendente dall'altra. Quindi alcuni potrebbero essere più grandi di altri, a seconda della dimensione del loro contenuto. Questi sono meno simili a colonne e più simili a blocchi indipendenti.

La griglia funziona in modo diverso, impostando una griglia 2D con colonne bloccate per impostazione predefinita. Una colonna con testo breve avrà le stesse dimensioni di una con testo molto più lungo, come dimostra l'immagine sopra.

In sintesi, CSS Grid è un po’ più strutturato, mentre Flexbox lo è di più sistema di layout flessibile e reattivo. Questi sistemi di layout alternativi hanno un nome appropriato!

Quando utilizzare Flexbox

Vuoi fare affidamento sul dimensionamento intrinseco di ogni colonna/riga, come definito dal loro contenuto? Oppure vuoi avere un controllo strutturato dal punto di vista dei genitori? Se la tua risposta è la prima, allora Flexbox è la soluzione perfetta per te.

Per dimostrarlo, consideriamo un menu di navigazione orizzontale. Sostituisci il markup all'interno del file tag con questo:

<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>

Sostituisci il markup nel file CSS con questo:

.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;
}

Ecco il risultato:

Ora trasforma la prima navigazione in un layout flessibile e la seconda in un layout a griglia aggiungendo il seguente 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));
}

Confronta i risultati per vedere quale era più adatto:

Dall'immagine sopra puoi vedere che Flexbox è la soluzione perfetta in questo caso. Hai degli elementi che vuoi affiancare e mantenere il loro dimensionamento intrinseco (grande o piccolo a seconda della lunghezza del testo). Con Grid, ogni cella ha una larghezza fissa e non ha un bell'aspetto, almeno con collegamenti di testo semplice.

Quando utilizzare la griglia CSS

Un posto in cui Grid eccelle davvero è quando vuoi creare un sistema rigido dal genitore. Un esempio è un insieme di elementi di una carta che dovrebbero essere ugualmente ampi, anche se contengono quantità diverse di contenuto.

Sostituisci il markup all'interno del file tag con questo:

<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>

Aggiungi questo CSS:

.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}

Stai iniziando con un display Flexbox per vedere come appare, in modo da poterlo confrontare con la visualizzazione della griglia. Ecco l'output:

Notate come l'ultima colonna sia più grande delle altre a causa del suo dimensionamento intrinseco, che è ciò che Flexbox gestisce bene. Ma per renderli della stessa larghezza utilizzando Flexbox, dovresti andare contro il dimensionamento intrinseco aggiungendo quanto segue:

.columns > * {
flex: 1;
}

Questo fa il trucco. Ma Grid è più adatto per casi come questo. Devi solo specificare il numero di colonne e sei a posto:

.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}

Ecco il risultato:

Un altro vantaggio dell'utilizzo di Grid è che il genitore controlla il layout dei figli. Quindi puoi aggiungere e rimuovere elementi figlio senza preoccuparti di interrompere il layout.

Quindi quando dovresti usare Grid o Flexbox?

In sintesi, CSS Grid è ottimo quando desideri un controllo strutturato dal punto di vista del genitore, con colonne di uguale dimensione indipendentemente dalla dimensione dei suoi singoli contenuti.

Flexbox, invece, è ideale quando si desidera un sistema più flessibile in base al dimensionamento intrinseco degli elementi.