Image Grid (using CSS custom variables)

by Konstantin Rouda

HTML

<div class="image-grid">
    <img src="https://unsplash.it/500/400/?image=40" />
    <img src="https://unsplash.it/500/400/?image=50" />
    <img src="https://unsplash.it/500/400/?image=60" />
    <img src="https://unsplash.it/500/400/?image=70" />
    <img src="https://unsplash.it/500/400/?image=80" />
    <img src="https://unsplash.it/500/400/?image=90" />
  </div>

CSS

HTML {
  font-family: "Libre Baskerville", "Open Sans", sans-serif, serif;
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  height: 200vh;
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

IMG {
  max-width: 100%;
}

/*Actual Style*/

:root {
  --grid-spacing: 16px;
  --grid-columns: 1;
}

.image-grid {
  display: flex;
  flex-flow: row wrap;
  max-width: 90%;
  margin: .1em auto;
  padding: calc(var(--grid-spacing) / 2);
  border: 1px solid;
}
/*we have only one column*/
.image-grid > IMG {
  margin: calc(var(--grid-spacing) / 2);
  width: calc( 100% / var(--grid-columns) - var(--grid-spacing) );
}

@media all and (min-width: 700px) {
  /*we have 3 columns*/
  :root {
    --grid-columns: 3;
  }

}


@media all and (min-width: 1024px) {
  /*we have 6 columns*/
  :root {
    --grid-columns: 6
  }
  
}