Flexbox
Un layout dinamico in muratura non è possibile con flexbox, almeno non in modo pulito ed efficiente.
Flexbox è un sistema di layout monodimensionale. Ciò significa che può allineare gli oggetti lungo linee orizzontali o verticali. Un oggetto flessibile è limitato alla sua riga o colonna.
Un vero sistema a griglia è bidimensionale, il che significa che può allineare gli oggetti lungo linee orizzontali E verticali. Gli elementi di contenuto possono estendersi su più righe e colonne contemporaneamente, cosa che gli elementi flessibili non possono fare.
Questo è il motivo per cui flexbox ha una capacità limitata per la costruzione di reti. È anche un motivo per cui il W3C ha sviluppato un'altra tecnologia CSS3, Grid Layout .
row wrap
In un contenitore flessibile con flex-flow: row wrap, gli articoli flessibili devono avvolgere in nuove file .
Ciò significa che un oggetto flessibile non può avvolgere sotto un altro oggetto nella stessa riga .
Nota sopra come div # 3 si avvolge sotto div # 1 , creando una nuova riga. Non può avvolgere al di sotto del div # 2 .
Di conseguenza, quando gli oggetti non sono i più alti della riga, rimane spazio bianco, creando vuoti sgradevoli.
column wrap
Se si passa a flex-flow: column wrap, un layout simile a una griglia è più raggiungibile. Tuttavia, un contenitore in direzione di colonna presenta quattro potenziali problemi fin dall'inizio:
- Gli oggetti flessibili scorrono verticalmente, non orizzontalmente (come è necessario in questo caso).
- Il contenitore si espande in orizzontale, non in verticale (come il layout Pinterest).
- Richiede che il contenitore abbia un'altezza fissa, quindi gli articoli sanno dove avvolgere.
- Al momento della stesura di questo documento, presenta una carenza in tutti i principali browser in cui il contenitore non si espande per contenere colonne aggiuntive .
Di conseguenza, un contenitore con direzione colonna non è un'opzione in questo caso e in molti altri casi.
Griglia CSS con dimensioni oggetto non definite
Il layout della griglia sarebbe una soluzione perfetta al tuo problema se le varie altezze degli elementi di contenuto potessero essere predeterminate . Tutti gli altri requisiti rientrano nella capacità di Grid.
La larghezza e l'altezza degli elementi della griglia devono essere noti per colmare le lacune con gli elementi circostanti.
Quindi Grid, che è il miglior CSS che ha da offrire per costruire un layout in muratura a scorrimento orizzontale, in questo caso non è all'altezza.
In effetti, fino a quando una tecnologia CSS arriva con la capacità di colmare automaticamente le lacune, i CSS in generale non hanno soluzione. Qualcosa del genere richiederebbe probabilmente di ridisegnare il documento, quindi non sono sicuro di quanto sia utile o efficiente.
Avrai bisogno di una sceneggiatura.
Le soluzioni JavaScript tendono a utilizzare il posizionamento assoluto, che rimuove gli elementi di contenuto dal flusso di documenti al fine di riorganizzarli senza lacune. Ecco due esempi:
Griglia CSS con dimensioni dell'elemento definite
Per i layout in cui sono noti la larghezza e l'altezza degli elementi di contenuto, ecco un layout in muratura a scorrimento orizzontale in puro CSS:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Come funziona
- Stabilire un contenitore della griglia a livello di blocco. (
inline-gridsarebbe l'altra opzione)
- La
grid-auto-rowsproprietà imposta l'altezza delle righe generate automaticamente. In questa griglia ogni riga è alta 50 px.
- La
grid-gapproprietà è una scorciatoia per grid-column-gape grid-row-gap. Questa regola imposta un divario di 10px tra gli elementi della griglia. (Non si applica all'area tra gli oggetti e il contenitore.)
La grid-template-columnsproprietà imposta la larghezza delle colonne definite in modo esplicito.
La repeatnotazione definisce un modello di colonne (o righe) ripetute.
La auto-fillfunzione dice alla griglia di allineare quante più colonne (o righe) possibile senza traboccare il contenitore. (Questo può creare un comportamento simile a quello del layout flessibile flex-wrap: wrap.)
La minmax()funzione imposta un intervallo di dimensioni minimo e massimo per ogni colonna (o riga). Nel codice sopra, la larghezza di ogni colonna sarà un minimo del 30% del contenitore e il massimo di tutto lo spazio libero disponibile.
L' frunità rappresenta una frazione dello spazio libero nel contenitore della griglia. È paragonabile alla flex-growproprietà di flexbox .
Con grid-rowe spanstiamo dicendo agli elementi della griglia quante righe devono attraversare.
Supporto browser per griglia CSS
- Chrome: supporto completo a partire dall'8 marzo 2017 (versione 57)
- Firefox: supporto completo a partire dal 6 marzo 2017 (versione 52)
- Safari: supporto completo a partire dal 26 marzo 2017 (versione 10.1)
- Edge: supporto completo a partire dal 16 ottobre 2017 (versione 16)
- IE11 - nessun supporto per le specifiche attuali; supporta la versione obsoleta
Ecco il quadro completo: http://caniuse.com/#search=grid
Fantastica funzione di sovrapposizione della griglia in Firefox
Negli strumenti di sviluppo di Firefox, quando si ispeziona il contenitore della griglia, nella dichiarazione CSS è presente una piccola icona a griglia. Al clic, mostra un contorno della griglia sulla pagina.
Maggiori dettagli qui: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
