Capisco che questo sia impossibile da ottenere usando Flexbox, poiché ogni riga può essere solo l'altezza minima richiesta per adattarsi ai suoi elementi, ma questo può essere ottenuto utilizzando la nuova griglia CSS?
Per essere chiari, voglio la stessa altezza per tutti gli elementi in una griglia su tutte le righe, non solo per ogni riga. Fondamentalmente, la "cella" più alta dovrebbe dettare l'altezza di tutte le celle, non solo delle celle nella sua riga.
Risposte:
Se l'obiettivo è creare una griglia con righe di uguale altezza, dove la cella più alta nella griglia imposta l'altezza per tutte le righe, ecco una soluzione rapida e semplice:
grid-auto-rows: 1frGrid Layout fornisce un'unità per stabilire lunghezze flessibili in un contenitore a griglia. Questa è l' frunità. È progettato per distribuire lo spazio libero nel contenitore ed è in qualche modo analogo alla flex-growproprietà in flexbox.
Se imposti tutte le righe in un contenitore della griglia su 1fr, diciamo così:
grid-auto-rows: 1fr;... allora tutte le righe avranno la stessa altezza.
Non ha davvero senso perché frdovrebbe distribuire spazio libero. E se più righe hanno contenuti con altezze diverse, quando lo spazio è distribuito, alcune righe sarebbero proporzionalmente più piccole e più alte.
Tranne che , sepolto in profondità nelle specifiche della griglia, c'è questa piccola pepita:
7.2.3. Lunghezze flessibili: l'
frunità...
Quando lo spazio disponibile è infinito (cosa che accade quando la larghezza o l'altezza del contenitore della griglia è indefinita), le
frtracce della griglia di dimensioni flessibili ( ) vengono ridimensionate in base al loro contenuto mantenendo le rispettive proporzioni.La dimensione utilizzata di ciascuna traccia della griglia di dimensioni flessibili viene calcolata determinando la
max-contentdimensione di ciascuna traccia della griglia di dimensioni flessibili e dividendo tale dimensione per il rispettivo fattore di flessibilità per determinare una "1frdimensione ipotetica ".Il massimo di questi viene utilizzato come
1frlunghezza risolta (la frazione di flessione), che viene quindi moltiplicata per il fattore di flessione di ciascuna traccia della griglia per determinarne la dimensione finale.
Quindi, se sto leggendo correttamente, quando si tratta di una griglia di dimensioni dinamiche (ad esempio, l'altezza è indefinita), le tracce della griglia (righe, in questo caso) vengono ridimensionate in base al loro contenuto.
L'altezza di ogni riga è determinata max-contentdall'elemento della griglia più alto ( ).
L'altezza massima di quelle righe diventa la lunghezza di 1fr.
È così che 1frcrea righe di uguale altezza in un contenitore di griglia.
Come notato nella domanda, le righe di altezza uguale non sono possibili con flexbox.
Gli elementi flessibili possono essere della stessa altezza sulla stessa riga, ma non su più righe.
Questo comportamento è definito nelle specifiche flexbox:
In un contenitore flessibile multilinea, la dimensione trasversale di ciascuna riga è la dimensione minima necessaria per contenere gli elementi flessibili sulla riga.
In altre parole, quando ci sono più righe in un contenitore flessibile basato su righe, l'altezza di ciascuna riga (la "dimensione della croce") è l'altezza minima necessaria per contenere gli elementi flessibili sulla riga.
La risposta breve è che l'impostazione grid-auto-rows: 1fr;sul contenitore della griglia risolve ciò che è stato chiesto.
grid-auto-rowper quella riga era 2, significa che la dimensione di 1fr per la prima riga è uguale a 50px?