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

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

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

2 个答案: