Grille
Afficher une collection d'image en grille de photos.
Remplace les anciens justified gallery.
Tous les exemples présentés ici auront une combinaison de plusieurs class.
.masonry.style1.split3
Style "Masonry" ou "Tuile".
Les images gardent leur ratio d'origine.
Présenté ici avec le style1 et 3 colonnes d'images.
Les images gardent leur ratio d'origine.
Présenté ici avec le style1 et 3 colonnes d'images.
<insert-markup>components.grille-0</insert-markup>
.grid.style2.split3.square
Style "Grille".
Les images ont un ratio forcé, paysage, portrait ou carré.
Présenté ici avec le style1, 3 colonnes d'images et au format carré.
Les images ont un ratio forcé, paysage, portrait ou carré.
Présenté ici avec le style1, 3 colonnes d'images et au format carré.
<insert-markup>components.grille-1</insert-markup>
Markup: ../../../snippets/components/grille.hbs
<div class="blk-grid {{modifier_class}}">
<div class="blk-grid__container">
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/01.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/02.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/03.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
<div class="collection-item">
<figure class="lazy">
<picture>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20720%20441%27%3E%3C%2Fsvg%3E"
data-src="ideo-assets/img/04.jpg" width="720" height="441" loading="lazy">
</picture>
<figcaption>
<span class="title">Titre Fusce ullamcorper</span>
<span class="description">Description Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</figcaption>
</figure>
</div>
</div>
</div>
Source:
src/cssframework_v2/less/components/grid.less, line 1