Gallery

Gallery five

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 four

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 three

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>