JSFiddle - React, Tailwind, and code Playground

by arjhun

HTML

<div class="wrapper">
  <div class="css-grid">
    <div class="grid-item"><img src="https://www.fillmurray.com/500/320" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/350" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/300" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/360" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/300" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/370" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/300" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/300" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/380" alt=""></div>
    <div class="grid-item"><img src="https://www.fillmurray.com/500/330" alt=""></div>
  </div>
</div>

SCSS

*{
  border-sizing: border-box;
}
wrapper{
  padding: 1em 0;
  margin: 0 auto;
}

.css-grid{
  border: 1px solid rgb(200, 10, 100);
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
  
  .grid-item{
    border: 1px solid lightgrey;
    img{
      display: block;
      width: 100%;
      height: auto;
    }
  }
}