带有外部列的CSS网格自动流minmax

Question

您好，我想使用网格的repeat和auto-fill，但将外列左右设置为1vw（垂直宽度单位），创建一些填充。

不确定如何设置网格项以使用auto-fill 列，而忽略设置为{{1的 columns }}。

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;
}

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>