JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="box">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  
</ul>

CSS

.box {
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    background: 
}
.box li {
  width: 33.3%;
  height: 0;
  padding-bottom:33.3%;
  background:red;
  flex:0 1 33.3%;

}
.box li:nth-child(odd) {
  background:green;
}