JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">
  

<div class="wrapper2">
  <div class="box2">1</div>
  <div class="box2">2</div>
  <div class="box2">3</div>
  <div class="box2">4</div>
  <div class="box2">5</div>
  <div class="box2">6</div>
  <div class="box2">7</div>
  <div class="box2">8</div>
  <div class="box2">9</div>
</div>
  
  
  </div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

CSS

.box {
 
  border: solid black 1px;
}



.wrapper { 
  display: grid;
  grid-template-columns: repeat(6, 100px);
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column;
}

.box2 {
 
  border: solid black 1px;
}



.wrapper2 { 
  display: grid;
  grid-template-columns: repeat(6, 25px);
  grid-template-rows: 25px 25px 25px;
  grid-auto-flow: column;
}