JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="list">
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
</ul>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 25%;
    /* flex: 1 0 25%; */
    /* padding: 20px; */
    /* margin-left: 20px; */
    margin-bottom: 20px;
    background: red;
    &:nth-child(5n + 1) {
      margin-left: 0;
    }
  }
}
li:nth-child(4n+1):nth-last-child(-n+4),
li:nth-child(4n+1):nth-last-child(-n+4) ~ li {
  background: green;
}