具有外柱的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>