JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="gallery">

  <div>
    Image 0
  </div>

  <div>
    Image 1
  </div>

  <div class="grid-col-2">
    Image 2
  </div>

  <div>
    Image 3
  </div>

  <div>
    Image 4
  </div>

  <div>
    Image 5
  </div>

</div>

<p style="margin-top: 100px;" id="innerWidth"></p>

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 1px;
}

.gallery div {
  background-color: red;
  padding: 10px;
  color: white;
  text-align: center;
}

.gallery div.grid-col-2 {
  grid-column: span 2;
  background-color: green;
}

body,
html {
  padding: 0;
  margin: 0;
}

@media (max-width: 600px) {
  .gallery div.grid-col-2 {
  grid-column: span 1;
  background-color: green;
}
  
  
}

JavaScript

function innerWidth() {
  document.getElementById('innerWidth').innerHTML = "Inner Width: " + window.innerWidth;
}

innerWidth();
window.onresize = innerWidth;