JSFiddle - React, Tailwind, and code Playground

by vi161

HTML

<div class="grid">
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-second">Second (Want till end)</div>
  
  <div class="grid-another">1</div>
  
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>  
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: silver;
}

.grid-second {
  grid-column: 1 / -1;
  background-color: red;
}

/* Not important fancy styles */
.grid div {
  height: 40px;
  text-align: center;
  padding-top: 20px;
}
.grid-another {
  background-color: purple;
  border: 1px solid gray;
}