代码之家 › 专栏 › 技术社区 › James

带外部列的CSS网格自动流最小值

css-grid css3 css

0

James · 技术社区 · 6 年前

嗨,我想用网格的 repeat 和 auto-fill 但用 外立柱 左右设置为 1vw (垂直宽度单位)创建一些衬垫 .

不确定如何设置 网格项目 使用 自动填充 柱忽略柱设置为 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>

1 回复 | 直到 6 年前

1

0

Paulie_D 6 年前

你想得太多了。只要给出 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>