Flexbox
Une disposition de maçonnerie dynamique n'est pas possible avec flexbox, du moins pas de manière propre et efficace.
Flexbox est un système de mise en page unidimensionnel. Cela signifie qu'il peut aligner les éléments le long de lignes horizontales OU verticales. Un élément flexible est confiné à sa ligne ou à sa colonne.
Un vrai système de grille est bidimensionnel, ce qui signifie qu'il peut aligner des éléments le long de lignes horizontales ET verticales. Les éléments de contenu peuvent s'étendre simultanément sur des lignes et des colonnes, ce que les éléments flexibles ne peuvent pas faire.
C'est pourquoi flexbox a une capacité limitée pour la construction de grilles. C'est aussi une raison pour laquelle le W3C a développé une autre technologie CSS3, Grid Layout .
row wrap
Dans un conteneur flexible avec flex-flow: row wrap, les éléments flex doivent être enveloppés dans de nouvelles lignes .
Cela signifie qu'un élément flexible ne peut pas être enveloppé sous un autre élément de la même ligne .
Remarquez ci-dessus comment la div # 3 s'enroule sous la div # 1 , créant une nouvelle ligne. Il ne peut pas être enveloppé sous la div # 2 .
En conséquence, lorsque les éléments ne sont pas les plus hauts de la ligne, un espace blanc reste, créant des espaces disgracieux.
column wrap
Si vous passez à flex-flow: column wrap, une disposition en forme de grille est plus réalisable. Cependant, un conteneur de direction de colonne présente quatre problèmes potentiels dès le départ:
- Les éléments flexibles circulent verticalement et non horizontalement (comme vous en avez besoin dans ce cas).
- Le conteneur se développe horizontalement, pas verticalement (comme la mise en page Pinterest).
- Il faut que le conteneur ait une hauteur fixe, afin que les articles sachent où emballer.
- Au moment d'écrire ces lignes, il présente une carence dans tous les principaux navigateurs où le conteneur ne se développe pas pour accueillir des colonnes supplémentaires .
Par conséquent, un conteneur de direction de colonne n'est pas une option dans ce cas, et dans de nombreux autres cas.
Grille CSS avec des dimensions d'élément non définies
Grid Layout serait une solution parfaite à votre problème si les différentes hauteurs des éléments de contenu pouvaient être prédéterminées . Toutes les autres exigences sont bien dans la capacité de Grid.
La largeur et la hauteur des éléments de la grille doivent être connues afin de combler les espaces avec les éléments environnants.
Donc, Grid, qui est le meilleur CSS a à offrir pour créer une mise en page de maçonnerie à écoulement horizontal, ne suffit pas dans ce cas.
En fait, jusqu'à ce qu'une technologie CSS arrive avec la capacité de combler automatiquement les lacunes, CSS en général n'a pas de solution. Quelque chose comme cela nécessiterait probablement de redéfinir le document, donc je ne suis pas sûr de son utilité ou de son efficacité.
Vous aurez besoin d'un script.
Les solutions JavaScript ont tendance à utiliser un positionnement absolu, qui supprime les éléments de contenu du flux de documents afin de les réorganiser sans espaces. Voici deux exemples:
Grille CSS avec des dimensions d'élément définies
Pour les mises en page où la largeur et la hauteur des éléments de contenu sont connues, voici une mise en page de maçonnerie à écoulement horizontal en CSS pur:
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>
Comment ça fonctionne
- Établissez un conteneur de grille au niveau du bloc. (
inline-gridserait l'autre option)
- La
grid-auto-rowspropriété définit la hauteur des lignes générées automatiquement. Dans cette grille, chaque ligne mesure 50 px de haut.
- La
grid-gappropriété est un raccourci pour grid-column-gapet grid-row-gap. Cette règle définit un écart de 10 pixels entre les éléments de la grille. (Cela ne s'applique pas à la zone entre les articles et le conteneur.)
La grid-template-columnspropriété définit la largeur des colonnes définies explicitement.
La repeatnotation définit un modèle de colonnes (ou lignes) répétitives.
La auto-fillfonction indique à la grille d'aligner autant de colonnes (ou de lignes) que possible sans déborder du conteneur. (Cela peut créer un comportement similaire à celui de la mise en page flexible flex-wrap: wrap.)
La minmax()fonction définit une plage de tailles minimale et maximale pour chaque colonne (ou ligne). Dans le code ci-dessus, la largeur de chaque colonne sera au minimum de 30% du conteneur et au maximum de tout espace libre disponible.
L' frunité représente une fraction de l'espace libre dans le conteneur de grille. C'est comparable à la flex-growpropriété de flexbox .
Avec grid-rowet, spannous indiquons aux éléments de la grille le nombre de lignes sur lesquelles ils doivent s'étendre.
Prise en charge du navigateur pour la grille CSS
- Chrome - prise en charge complète à partir du 8 mars 2017 (version 57)
- Firefox - support complet à partir du 6 mars 2017 (version 52)
- Safari - prise en charge complète à compter du 26 mars 2017 (version 10.1)
- Edge - prise en charge complète à partir du 16 octobre 2017 (version 16)
- IE11 - pas de support pour les spécifications actuelles; prend en charge la version obsolète
Voici l'image complète: http://caniuse.com/#search=grid
Fonctionnalité de superposition de grille cool dans Firefox
Dans les outils de développement de Firefox, lorsque vous inspectez le conteneur de grille, il y a une petite icône de grille dans la déclaration CSS. Au clic, il affiche un contour de votre grille sur la page.
Plus de détails ici: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
