带有外列的CSS网格自动流最小最大值答案

【问题标题】：Css grid auto-flow minmax with outer columns带有外列的CSS网格自动流最小最大值
【发布时间】：2018-09-11 08:20:13
【问题描述】：

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

不确定如何将网格项设置为使用auto-fillcolumns并忽略设置为1vw的columns。

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>

【问题讨论】：

为什么不用填充或边距？如果您打算将这些区域留空。
使用 1vw 没有意义。
感谢您的 cmets。如果要创建一个响应性较差的网格，我可以编写以下布局： grid-template-columns: 1vw repeat(12, 1fr) 1vw 在 12 列网格的任一侧给我灵活的间隙。我可以使用边距或填充，但如果可能的话我想使用网格语法

标签： css css-grid

【解决方案1】：

你想多了。只需给出1vw 的ul 左/右margin 并完全删除这些网格列。或者更简单，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>

【讨论】：

是的，被指控有罪。感谢您的宝贵时间。