Gallery that goes from one column to five columns based on browser window width.
Class | Description |
---|---|
gallery--five |
Used on parent element |
grid__item |
Used on each individual child element of gallery--three |
<div class="gallery--five">
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
</div>
Gallery that goes from one column to four columns based on browser window width.
Class | Description |
---|---|
gallery--four |
Used on parent element |
grid__item |
Used on each individual child element of gallery--three |
<div class="gallery--four">
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
</div>
Gallery that goes from one column to three columns based on browser window width.
Class | Description |
---|---|
gallery--three |
Used on parent element |
grid__item |
Used on each individual child element of gallery--three |
<div class="gallery--three">
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
<div class="grid__item"><img src="http://placehold.it/600x300" alt=""></div>
</div>