如何指定网格布局 div 中的列的宽度应等于网格 div 的父级的 100%

Question

我有一个包含另一个具有网格布局的 div 的父 div。网格布局将有 1 行和任意多列。

如何指定列的宽度必须等于父宽度的100%？

Answer 1

使用

grid-auto-flow: column;grid-auto-columns: 100%;

.container {
  display: grid;
  grid-auto-flow: column; /* column layout */
  grid-auto-columns: 100%; /* all columns equal to container width */
  border:2px solid red;
  height: 250px;
  overflow: auto;
}

.container div{
  border:2px solid blue;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>