02.12 Boxy - Galerie
Zdrojové CSS: /src/css/molecules/box/_gallery.scss
<div class="box-gallery">
<div class="grid">
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
</div>
</div>
Příklad použití bez mezer. Vychází z dokumentace gridu.
<div class="box-gallery">
<div class="grid grid--nogutter">
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
</div>
</div>Příklad použití bez mezer. Vychází z dokumentace gridu.
Příklad použití v zanořeném gridu pro odsazení galerie. Vychází z dokumentace gridu.
<div class="grid">
<div class="grid__cell size--l--8-12 push--l--2-12">
<div class="box-gallery">
<div class="grid">
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
<div class="grid__cell size--xs--1-2 size--m--1-4 size--l--3-12">
<a href="#" class="image">
<div class="image__holder">
<div class="image__inner">
<img src="../img/illust/16-9.png" alt="">
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>Příklad použití v zanořeném gridu pro odsazení galerie. Vychází z dokumentace gridu.
Výchozí molekula s galerií. Galerie se skládá pomocí atomu gridu a atomu image. Díky použití gridu lze vytvořit libovolnou mřížku.