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

Question

我正在尝试创建一个如下所示的 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 像素的四列(屏幕截图中的红色列)。这里可能只有一列、两列、三列或四列。如果少于四列，则宽度为“自动”的列应占用额外的空间。

Answer 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>

你可以在这里看到代码片段:

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