<section>
  <div>
    <img src="http://placekitten.com/404/303">
    <img src="http://placekitten.com/404/303">
    <img src="http://placekitten.com/404/303">
    <img src="http://placekitten.com/404/303">
    <img src="http://placekitten.com/404/303">
    <img src="http://placekitten.com/404/303">
    <img src="http://placekitten.com/404/303">
    <img src="http://placekitten.com/404/303">
  </div>    
</section>
@import "nib"

html
  padding: 3rem

section
  overflow: hidden
  background: lighten(black, 80%)
  > div
    margin: 0 -10px

img
  float: left
  margin: 10px
  width: calc(100% * 1/4 - 20px)
  @media (max-width: 900px)
    width: calc(100% * 1/3 - 20px)
  @media (max-width: 600px)
    width: calc(100% * 1/2 - 20px)
  @media (max-width: 400px)
    width: calc(100% - 20px)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js