JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

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

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

<input type="text" id="count">

CSS

:root {
  --count: 5;
  --color: #ff00;
}

ul {
  --count: 2;
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  grid-gap: 10px;
}
ul > li {
  background: #999;
  padding: 10px;
}

input {
  margin: 30px 0 0;
  height: 26px;
  border: 1px solid #000;
}
button {
  --color: red;
}

JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
  const count = document.querySelector('#count')
  const lsts = document.querySelectorAll('.lst')
	
  count.addEventListener('input', function(e) {
    let countNumber = e.currentTarget.value;
    lsts.forEach(lst => {
    	lst.style.setProperty('--count', Number(countNumber));
    })
  })
});