JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="grid-container">

  <div class="grid-item">
    <img src="https://placehold.co/300x200">
    <p>This is some text</p>
  </div>

  <div class="grid-item">
    <img src="https://placehold.co/300x200">
    <p>This is some text</p>
  </div>

  <div class="grid-item">
    <img src="https://placehold.co/300x200">
    <p>This is some text</p>
  </div>

  <div class="grid-item">
    <img src="https://placehold.co/300x200">
    <p>This is some text</p>
  </div>

  <div class="grid-item">
    <img src="https://placehold.co/300x200">
    <p>This is some text</p>
  </div>

</div>

CSS

body { font-size: 22px; }
ul { padding: 0; margin: 0; }
li { list-style-type: none; margin: 0; }

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
}
.grid-item {
  border: 1px solid green;
  padding: 5px;
}
.grid-item img {
  width: 100%;
}

@media (max-width: 1000px) {
  .grid-container {
    grid-template-columns: auto auto auto;
  }
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: auto auto;
  }
}