JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

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

CSS

:root {
  --column: 6;
}

.list {
  display: grid;
  grid-template-columns: repeat(var(--column), 1fr);
  grid-gap: 16px;
}
.list li {
  background: #000000;
  padding: 30px;
  color: #FFFFFF;
}

@media screen and (max-width: 768px) {
  .list {
    --column: 2;
  }
}

@media screen and (max-width: 414px) {
  .list {
    --column: 1;
  }
}