当我需要不同的宽度时，如何处理 CSS 网格中的动态列数？答案

【问题标题】：How do I handle a dynamic number of columns in CSS grid when I need different widths?当我需要不同的宽度时，如何处理 CSS 网格中的动态列数？
【发布时间】：2018-08-07 13:05:04
【问题描述】：

我正在尝试创建一个如下所示的 CSS 网格：

| 50 pixels | auto | 100 pixels | 100 pixels | 100 pixels | 100 pixels | 50 pixels | 50 pixels

此处截图：https://imgur.com/a/IVM1v8C

现在我正在使用 grid-template-columns 定义列宽

但我不知道如何动态制作 100 像素的四列（屏幕截图中的红色部分）。这里可能只有一列，两列、三列或四列。如果少于四列，则“自动”宽度的列应占用额外的空间。

【问题讨论】：

我不认为 css-grid 可以做这种布局。 Flexbox 在这里可能是一个更好的选择：codepen.io/danield770/pen/xJyKMK ...这是您感兴趣的结果吗？

标签： css css-grid

【解决方案1】：

试试这个：

.container {
  display: grid;
  grid-template-columns: 50px 1fr auto 50px 50px
}

.subgrid {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
}

<div class="container">
    <div>50px</div>
    <div>auto</div>
    <div class='subgrid'>
      <div>100px</div>
      <div>100px</div>
      <div>100px</div>
    </div>
    <div>50px</div>
    <div>50px</div>
  </div>

你可以在这里看到sn-p：

https://jsbin.com/zafopivine/1/edit?html,css,output

【讨论】：

【解决方案2】：

试试这个基于 flex 的解决方案

        .container{
            display: flex;
            height: 150px;
            width: 100%;
            
        }
        .child-100, .child-50, .child-auto{
            flex-grow: 1;
            border: 1px solid red;
        }
        .child-100{
            flex: 0 0 100px;
        }
        .child-50{
            flex: 0 0 50px;
        }

    <div class="container" >
        <div class="child-50">child-50</div>
        <div class="child-auto">child-auto</div>
        <div class="child-100">child-100</div>
        <div class="child-100">child-100</div>
        <div class="child-100">child-100</div>
        <div class="child-100">child-100</div>
        <div class="child-50">child-50</div>
        <div class="child-50">child-50</div>
    </div>

【讨论】：

感谢 flex 版本！我实际上最终使用了它，但由于问题是关于 CSS 网格，我认为 @Armin 的答案是最正确的。