Адаптивная сетка с помощью чистого CSS Grid

<ul class="kumedia-semuenes">
  <li>ZorNet.Ru 1</li>
  <li>ZorNet.Ru 2</li>
  <li>ZorNet.Ru 3</li>
  <li>ZorNet.Ru 4</li>
  <li>ZorNet.Ru 5</li>
  <li>ZorNet.Ru 6</li>
  <li>ZorNet.Ru 7</li>
  <li>ZorNet.Ru 8</li>
  <li>ZorNet.Ru 9</li>
  <li>ZorNet.Ru 10</li>
  <li>ZorNet.Ru 11</li>
  <li>ZorNet.Ru 12</li>
</ul>

/* Удаление стилей списков для элементов ul, ol с атрибутом class */
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы, у которых нет класса, получают стили по умолчанию */
a:not([class]) {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  cursor: pointer;
}
/* Отключить недавний поиск в WebKit. */
::-webkit-search-decoration {
  display: none;
}

/* Нормализовать высоту строки поля формы в WebKit */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  line-height: normal;
}

/* Сделать поле поиска похожим на текстовое поле */
input[type='search'] {
  -webkit-appearance: textfield;
}

/* Сделайте изображения адаптивными */
img {
  max-width: 100%;
}

/* Удалите _all_ анимации и переходы для людей, которые предпочитают их не видеть */
@media (prefers-reduced-motion: reduce) {
  body {
  scroll-behavior: auto;
  }

  * {
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  }
}

.kumedia-semuenes {
  --kumedia-semuenes-min-size: 16rem;
   
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kumedia-semuenes-min-size), 1fr));
  grid-gap: 1rem;
}

/* Презентационные стили */

body {
  background: #efefef;
  padding: 1rem;
  line-height: 1.4;
  font-family: sans-serif;
}

li {
  padding: 5rem 1rem;
  text-align: center;
  font-size: 1.5rem;
  background: #5d6cd4;
  color: #eae4e4;
}