Imbriquer des blocs en masonry sans JS

Bonjour tout le monde !
Aujourd'hui gros challenge pour lequel j'aimerais avoir votre avis ^^

Je souhaite essayer de réaliser une page sur laquelle des élément de taille différente se placent en grille et s'emboîtent les uns entre les autres autant verticalement qu'horizontalement.



Pour ça j'utilise la propriété "colomn-count", mais le soucis est que le navigateur range les éléments ayant une hauteur plus petite à côté (1 et 3), et place mon bloc plus large en dessous,

Je voudrais que les blocs s'ordonnent comme sur l'image.

Mon souhait est également de le faire uniquement avec du CSS, et en ayant très peu de conteneurs pour alléger mon DOM.

Voici un code pour le DOM :

<div class="grille">
<div class="panneau un-tiers">1</div>
<div class="panneau deux-tiers">2</div>
<div class="panneau un tiers">3</div>
</div>

Et voici le CSS :

.grille{
column-count:2;
width:100%;
}

.panneau{
display:inline-block;
vertical-align:top;
}

.un-tiers{
width:33%;
}

.deux-tiers{
width:66%;
}

Suis-je obligé de créer un conteneur "ligne" à chaque fois et de laisser un blanc pour les éléments ayant une hauteur moindre ? (ce qui me chagrinerait)

Était-ce une mauvaise idées d'utiliser la propriété column-count ?

Merci de m'avoir lu
Modifié par openwave (28 Jun 2016 - 22:16)

Bonjour,

Je ne sais pas ce qu'est le "masonry" mais au vu que tu évoque le souhait d'une solution 100% Css c'est une chose qui me parle plus.

Le concept de grille est fort bien maitrisé aujourd'hui et ce intégralement en Css. S'offrent toi une multitude de solutions.

Partant du principe que moins t'en fera, mieux ce sera, tu te tournera alors vers du "tout fait". Dans le genre centrale nucléaire, Boostrap (alias Goliath) intègre un système de grille. Pour un poids beaucoup plus raisonnable, tu retrouvera ce système dans la feuille Knacss (alias David). La grille s'applique au html par le biais de classes.

Maintenant si tu préfère le faire "à la main", tu as de quoi t'éclater.
Récemment est passé au statut de release candidate le module Grid. Le nom de ce module n'est pas métaphorique, sa spécialité est la conception de grille. Malheureusement cette techno est fort trop récente si tu souhaite un minimum de rétro-compatibilité.

Tout espoir n'est pas perdu, il y a des alternatives. Sur ce coup je vais faire mon Raphaël en te conseillant de te tourner vers le module Flexbox qui à l'heure actuelle, du fait d'une ancienneté plus grande, est beaucoup mieux supporté.

Ensuite si tu veux vraiment cibler le 0,1% qui utilise un navigateur obsolète, il te reste la préhistorique solution qui est de jouer avec inline-block et les émargements.

Par contre, le coup du column-count, dans ce contexte, je ne l'ai jamais croisé. C'est peut-être viable mais ne semble pas être une solution privilégiée.


Edit : "laisser blanc" => quand on en arrive à se dire ça c'est que la voie suivie n'est pas bonne. A mon sens, on ne devrait jamais avoir à "laisser des blancs" en code. Nous devons toujours avoir la maitrise sur les dimensions, les positions et les espacements ; et tout ça c'est du css.

Modifié par Greg_Lumiere (29 Jun 2016 - 07:01)

C'est tout à fait possible en css pur : CodePen

Un exemple autrement plus complexe : Example Complex Layout

Un autre : Nested Grid

Précisons que votre demande n'est pas lié au concept Masonry, dans le sens où les blocks ne chercheront pas à occuper les espaces vides s'il se produisait un décalage, ce qui n'est possible qu'en js. Exemple en js avec isotope : sur ce site (edit : n'est plus utilisé sur le site). De toute façon, dans les exemples proposés en full css il ne peut y avoir de décalage.
Modifié par Olivier C (01 Dec 2018 - 11:58)

Merci pour vos réponse !

Personnellement j'aime beaucoup KNACSS pour la légèreté (même si c'est très pratique je n'aime pas trop bootstrap, perso moins il y a de règles CSS appliquées, plus je m'éclate), mais j'ai vraiment envie de me tourner sur du "natif/codé main" pour le moment.

L'idée est aussi d'avoir de la compatibilité, du coup je pencherais volontiers pour flexbox.

Je vais faire des test de ce pas ^^

C'est dommage les liens codepen ne marchent plus (404).

J'en profite pour donner un autre point : je ne sais pas si Flexbox le gère bien, mais j'aimerais que la "grille" se réadapte lorsque l'utilisateur tourne son smartphone ou sa tablette en mode paysage et inversement.

Pour cela, pour chaque élément, j'ai appliqué 5 media queries, et plutôt que de gérer le param orientation j'ai tout misé sur la width du viewport :

(en px)
- Largeur 1920 et +
- Largeur entre 1025 et 1336
- Largeur entre 961 et 1024
- Largeur entre 500 et 960
- Largeur inférieure à 500

Ça fait beaucoup de media queries pour gérer tout ça mais c'est ce qui me semblait le mieux

L'idée est vraiment que je puisse mettre des blocs à la suite dans ma grille en html, et que leur affichage ne soit qu'un problème CSS.

openwave a écrit :
C'est dommage les liens codepen ne marchent plus (404).

Etrange, pour moi ça fonctionne. Ce qui ne fonctionne pas chez moi ce sont les previews insérés dans les sites tiers.

[/quote=openwave]J'en profite pour donner un autre point : je ne sais pas si Flexbox le gère bien, mais j'aimerais que la "grille" se réadapte lorsque l'utilisateur tourne son smartphone ou sa tablette en mode paysage et inversement.Flexbox ou pas, tu devras gérer ça avec les medias-queries.

openwave a écrit :
Pour cela, pour chaque élément, j'ai appliqué 5 media queries, et plutôt que de gérer le param orientation j'ai tout misé sur la width du viewport :

(en px)
- Largeur 1920 et +
- Largeur entre 1025 et 1336
- Largeur entre 961 et 1024
- Largeur entre 500 et 960
- Largeur inférieure à 500

Ça fait beaucoup de media queries pour gérer tout ça mais c'est ce qui me semblait le mieux

Heu, non, ça ne fait pas tant que ça. Tu verrais moi... J'ai fais pareil, je ne teste pas l'orientation mais la largeur du viewport.
Par contre il y a un truc qui me chiffonne. En effet je trouve étrange que tu ais comme breakpoint 500px tout rond ainsi que 1024 qui correspond à un standard d'affichage (sur une résolution de 1024, ta painting zone ne peut faire 1024px du fait de l'encombrement du navigateur).

openwave a écrit :
L'idée est vraiment que je puisse mettre des blocs à la suite dans ma grille en html, et que leur affichage ne soit qu'un problème CSS.

Un petit lapsus en ces propos mais je vois l'idée Flexbox répond parfaitement à ce critère.


PS : Dans la dernière mouture de Knacss, le modèle de grille n'est-il pas déjà en flexbox ? C'est sans arrière pensée, c'est juste que j'ignore ce fait mais si c'est bien le cas voici une formidable source d'inspiration tout comme les exemples d'Olivier.
Modifié par Greg_Lumiere (29 Jun 2016 - 15:48)

Le CodePen ainsi que tous les codes que j'ai proposé plus haut sont aussi en flexbox, et bien sûr responsives.

Autant pour moi Olivier, ça marche en effet ! ^^

Bon sinon ça fait deux jours que je m'amuse un peu dans tous les sens avec Flexbox et c'est un vrai plaisir !

Avant je passais mon temps à gérer les choses sur du "display:inline-block" donc autant dire que Flexbox est un pur bonheur.

En plus maintenant je peux vraiment mieux centrer mes blocs et les positionner en bordure, ça m'a permit de contourner pas mal de problème que je gérais avec des position fixed/absolute/relative.

Par contre j'ai dû créer d'avantage de conteneurs mais je reste vraiment satisfait de cette solution là.

Pour les média queries je t'avoue que je les ai tout juste découvertes, et j'ai du mal à cerner quelles règles générales de dimensions je peux choisir.

Pour moi la largeur du viewport ne tiens pas compte du navigateur, c'est peut-être une erreur de ma part je l'avoue.

Dans la logique, j'ai choisi ces breakpoint un peu à défaut de savoir précisément quoi mettre, pour ça je me baisais sur l'outils de test mobile de Google Chrome :

- Largeur 1920 et + :
Je n'aime pas les macs mais je suis obsédé par l'écran Imax à 2880px de large, c'est surtout des règles pour appliquer des background-image précis histoire que de mon côté sur photoshop je traite les images très différemment pour optimiser le poids des pages, ou proposer des images de très bonnes qualités avec un un niveau de DPI qui se rapproche des écrans Retina (peut-être qu'une fois encore je mélange tout, je vous avoue que je ne maîtrise pas bien le sujet)

- Largeur entre 1025 et 1336
Pour les laptop comme le miens.

- Largeur entre 961 et 1024
Là c'est la largeur que je vois affichée pour l'Ipad en paysage sur l'outils de Chrome. Je me suis dis que ce serait ma référence pour les tablettes, mais là j'ai vu très large et très simpliste.

- Largeur entre 500 et 960
Pour ça je me baisais sur un smartphone en mode paysage ou une tablette en mode portrait.

- Largeur inférieure à 500
Là je me basais sur le mode portrait d'un smartphone, j'ai choisi le 500 pour arrondir assez large par rapport à ce que je vois de l'outils de Chrome pour le Galaxy S5, les Nexus ou encore l'Iphone (en général du 320, 360, ou 432) mais là encore je dois faire quelques erreurs j'imagine.