Css сетки автопотока minmax с наружными колоннами

Question

Привет. Я бы хотел использовать сетку repeat и auto-fill, но с внешними столбцами влево и вправо, установленными на 1vw (единица вертикальной ширины), для создания некоторого отступа .

Не уверен, как установить элементы сетки для использования auto-fill столбцов и игнорировать столбцов , установленных на 1vw.

body, html {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1vw repeat(auto-fill, minmax(200px , 1fr)) 1vw;
  grid-gap: 0.5vw;
}

li {
  text-align: center;
  list-style: none;
  background: peachpuff;
  padding: 0.5em;
}

<ul>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
</ul>

Answer 1

Вы думаете об этом. Просто укажите ul влево / вправо margin из 1vw и полностью удалите эти столбцы сетки. Или еще проще: width из 98vw и margin:auto

body, html {
  margin: 0;
  padding: 0;
}

ul {
  margin: auto;
  width:98vw;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px , 1fr));
  grid-gap: 0.5vw;
}

li {
  text-align: center;
  list-style: none;
  background: peachpuff;
  padding: 0.5em;
}

<ul>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
  <li>Grid Item</li>
</ul>