27 Gennaio 2022
Expand search form

La griglia CSS sostituisce Flexbox?

Grid è molto più recente di Flexbox e ha un po’ meno supporto da parte dei browser. Ecco perché ha perfettamente senso se la gente si chiede se la griglia CSS è qui per sostituire Flexbox.

Per mettere un punto su questo:

  1. Grid può fare cose che Flexbox non può fare.
  2. Flexbox può fare cose che Grid non può fare.
  3. Possono lavorare insieme: un elemento della griglia può essere un contenitore flexbox. Un elemento flex può essere un contenitore di griglia.

Anche se Grid è abbastanza nuovo, abbiamo un sacco di articoli su di esso, compreso un articolo per iniziare, un articolo su un layout di base fatto in più modi, e una guida completa.

Se non aveste sentito le trombe squillare, marzo 2017 è stato il mese della bandiera per Grid. È stata rilasciata, completamente priva di patch e pronta all’uso, in Chrome, Opera, Firefox e Safari. Persino Edge lo supporta, anche se una vecchia versione della specifica, per la quale è possibile ottenere un certo supporto utilizzando Autoprefixer.

Sembra un po’ complicato all’inizio. Soprattutto se state iniziando a prendere confidenza con la strana sintassi aliena di Flexbox. Ora c’è tutta un’altra sintassi da imparare? Accidenti.

Ecco alcune cose che Grid è specificamente meglio di Flexbox:

  • Fare layout di pagine intere. È meglio per questo anche solo considerando le ragioni di performance del layout.
  • Fare griglie letterali. Come X colonne con uno spazio Y tra di loro, roba da framework homegrown. grid-gap è meraviglioso, poiché le grondaie sono il principale punto dolente dei sistemi a griglia.
  • Richiedendo meno interventi di media query con funzionalità davvero potenti come auto layout, minmax(), repeat() e auto-fill. Ecco una bella idea.

E un’altra enorme: Grid può posizionare elementi in 2 dimensioni. Sia le colonne che le righe. Questa è la prima volta. Rachel Andrew una volta l’ha reso molto chiaro:

Flexbox è essenzialmente per la disposizione degli elementi in una sola dimensione – in una riga O in una colonna. Grid è per la disposizione degli elementi in due dimensioni – righe E colonne.

Vediamo qualche demo.

Diciamo che stiamo costruendo un componente di navigazione orizzontale – questo è il caso d’uso perfetto per Flexbox perché imposta il contenuto in una sola direzione. Nella demo di Chris qui sotto potete pasticciare con queste proprietà e vedere quanto sia potente Flexbox:

Ma ci sono alcuni casi in cui queste proprietà Flexbox, come justify-content o align-items, dovrebbero essere usate insieme alle proprietà Grid. Prendete questa demo per esempio:

Prima abbiamo fatto un .wrapper che è impostato su display: flex; . In questo modo possiamo impostare una max-width sulla nostra .grid e usare justify-content: center; per posizionarla al centro del viewport. Poi possiamo creare la nostra griglia con il giusto numero di colonne:

Questo è solo il primo passo.

Ora facciamo in modo che l’annuncio occupi l’intera riga della nostra griglia. Bene, possiamo farlo puntando specificamente il nostro

senza rovinare il resto dei figli della nostra griglia:

Quello che stiamo dicendo con il codice sopra è “iniziare questo div sulla prima colonna e finire sull’ultimissima colonna”. Dovrebbe apparire qualcosa del genere:

Inoltre, diciamo che abbiamo sempre voluto che il nostro blocco pubblicitario fosse il doppio della dimensione della nostra prima riga – possiamo assolutamente farlo! Dobbiamo solo usare la proprietà grid-template-rows:

Questo è l’equivalente di dire “ci sono tre righe nella nostra griglia. Assicurati sempre che la seconda riga sia il doppio della prima e della terza”. In altre parole, stiamo creando relazioni tra le righe e le altre righe definendo anche il numero di colonne nella nostra griglia!

Con CSS Grid possiamo impostare le relazioni orizzontalmente (con grid-template-columns ) e verticalmente (con grid-template-rows ) ma allo stesso tempo. Flexbox, d’altra parte, è bloccato a fare layout verticali o orizzontali (con flex-direction ) – ma questo non significa che dovremmo abbandonarlo.

Potenzialmente confuso: un layout “2D” con Flexbox

Ciò che può confondere un po’ è che non è impossibile fare layout multidimensionali solo con Flexbox. Per esempio:

Ci sono certamente righe e colonne, anche un elemento finale che si estende su più colonne. È facile da costruire e flessibile. Lo si fa permettendo il flex-wrap sul contenitore, avendo la flex-basis dei bambini come 1/3 della larghezza del contenitore, e permettendo flex-grow per allungare i bambini se necessario. (La proprietà flex è un’abbreviazione per flex-grow, flex-shrink e flex-basis).

Non è sbagliato, è solo un modo di fare qualcosa del genere, e probabilmente si potrebbe argomentare sul fatto che sia meno intuitivo e adattabile.

Potenzialmente confuso: un layout “1D” con Grid

Griglia può fare un layout 2D, cioè definire sia grid-template-rows che grid-template-columns, ma non deve necessariamente usarli entrambi. Qui c’è una demo che lo usa solo per disporre le caselle in una fila orizzontale:

Potresti anche essere interessato agli argomenti

La griglia CSS può sostituire Flexbox?

La maggior parte delle volte no. Grid è molto più recente di Flexbox e ha un po’ meno supporto da parte dei browser. Ecco perché ha perfettamente senso se la gente si chiede se la griglia CSS è qui per sostituire Flexbox.Mar 31, 2017

Continua…

La griglia CSS è meglio di Flexbox?

Le griglie CSS sono per i layout 2D. Funziona sia con le righe che con le colonne. Flexbox funziona meglio in una sola dimensione (sia righe O colonne). Sarà più conveniente e utile se li usi entrambi allo stesso tempo.Mar 5, 2021

Continua…

Dovrei usare la griglia o Flexbox 2020?

Se hai bisogno di un layout web che consiste solo di righe o colonne, allora Flexbox è il miglior modello da usare. Tuttavia, se hai un layout complesso, multi-fila e multi-colonna, allora vorrai usare CSS Grid. … Potresti voler progettare il tuo layout web generale con CSS Grid, ma usare Flexbox per alcune parti del tuo sito web.

Continua…

Cosa può fare la griglia CSS che Flexbox non può fare?

La differenza chiave è che CSS Grid può essere usato per creare layout bidimensionali, mentre Flexbox può essere usato solo per creare layout unidimensionali. Ciò significa che è possibile posizionare i componenti lungo gli assi X e Y in CSS Grid e solo un asse in Flexbox.Jan 19, 2021

Continua…

Si può usare CSS Grid?

A parte Internet Explorer, CSS Grid Layout non è fissato in Safari, Chrome, Opera, Firefox e Edge. … Questo significa che se scrivi del codice Grid Layout in Firefox, dovrebbe funzionare allo stesso modo in Chrome. Questa non è più una specifica sperimentale, e potete tranquillamente usarla in produzione.12 agosto 2021

Continua…

CSS Grid è meglio di bootstrap?

Bootstrap offre più di un sistema di layout a griglia ed è più di una suite di strumenti frontend in grado di tirare fuori complessi design reattivi attraverso le sue classi predefinite. … Quindi, l’utilizzo di CSS Grid rispetto a Bootstrap ha senso quando si implementano layout semplici.20 ott 2020

Continua…

Qual è la differenza tra CSS Grid e flexbox?

Flexbox è stato progettato specificamente per layout unidimensionali, mentre CSS Grid è progettato per consentire layout bidimensionali. Pertanto, CSS Grid può facilmente rendere righe e colonne simultaneamente. … Flexbox è progettato per i layout monodimensionali, e Grid per i layout bidimensionali.Mar 14, 2019

Continua…

CSS Grid è sicuro da usare?

Oltre che in Internet Explorer, CSS Grid Layout non è prefissato in Safari, Chrome, Opera, Firefox e Edge. … Questo significa che se scrivi del codice Grid Layout in Firefox, dovrebbe funzionare allo stesso modo in Chrome. Questa non è più una specifica sperimentale, e potete tranquillamente usarla in produzione.12 agosto 2021

Continua…

Qual è la differenza tra flexbox e griglia CSS?

Griglia e flexbox. La differenza di base tra CSS Grid Layout e CSS Flexbox Layout è che flexbox è stato progettato per il layout in una dimensione – o una riga o una colonna. Grid è stato progettato per un layout bidimensionale – righe e colonne allo stesso tempo.12 agosto 2021

Continua…

Cos’è la griglia CSS e flexbox?

Flexbox è stato progettato specificamente per i layout unidimensionali, mentre CSS Grid è progettato per consentire layout bidimensionali. … Flexbox è progettato per layout unidimensionali, mentre Grid per layout bidimensionali. L’approccio di CSS Grid è il layout prima, mentre l’approccio Flexbox è principalmente il contenuto.Mar 14, 2019

Continua…

La griglia CSS è sicura da usare?

A parte in Internet Explorer, CSS Grid Layout non è prefissato in Safari, Chrome, Opera, Firefox e Edge. … Questo significa che se scrivi del codice Grid Layout in Firefox, dovrebbe funzionare allo stesso modo in Chrome. Questa non è più una specifica sperimentale e puoi usarla tranquillamente in produzione.12 agosto 2021

Continua…

Qual è più reattivo griglia o Flex?

Griglia è più robusto. È una combinazione di larghezza, min-width, max-width, flex-basis, flex-grow e flex-shrink, per non parlare del contenuto all’interno e di cose come lo spazio bianco, così come gli altri elementi nella stessa riga.Feb 14, 2019

Continua…

Qual è la differenza tra flexbox e griglia?

Griglia e flexbox. La differenza di base tra CSS Grid Layout e CSS Flexbox Layout è che flexbox è stato progettato per il layout in una dimensione – una riga o una colonna. Grid è stato progettato per un layout bidimensionale – righe e colonne allo stesso tempo.12 agosto 2021

Continua…

Flexbox è reattivo?

Flexbox è un modello di layout CSS3 che risolve problemi solitamente difficili, tra cui come posizionare, centrare o ridimensionare dinamicamente gli elementi su una pagina. È uno strumento abbastanza moderno da creare design reattivi e abbastanza vecchio da essere implementato nei principali browser.Sep 15, 2019

Continua…

Puoi usare Flexbox e la griglia insieme?

Flexbox non è così utile per questi layout più coinvolti, perché ti permette solo di controllare come gli elementi sono disposti in una singola direzione. Naturalmente CSS grid e flexbox possono lavorare insieme in un layout. Puoi usare flexbox all’interno di CSS grid e viceversa.Sep 18, 2019

Continua…

Articolo precedente

Cos’è il buffer in una cattiva lettera di notizie?

Articolo successivo

Quali sono tre delle proprietà delle onde?

You might be interested in …

Quante costole ci sono nel corpo umano?

Le costole sono la serie di ossa lunghe, piatte e curve che formano la gabbia protettiva del torace. La gabbia toracica umana è composta da 12 ossa costali appaiate, ciascuna delle quali si articola con […]

Qual è il segno del fuoco?

Questi segni ispirano spontaneità, intuizione e passione negli altri Condividi PINTEREST Email Nozioni di base 12 Segni dello Zodiaco Tendenze e oroscopi Il Sole e i Segni del Sole La Luna e i Segni della […]

Cos’è la terapia ricreativa?

La terapia ricreativa, conosciuta anche come ricreazione terapeutica, è un processo sistematico che utilizza la ricreazione e altri interventi basati sull’attività per affrontare le esigenze valutate degli individui con malattie e/o condizioni invalidanti, come mezzo […]