时间戳

首页 > 解决方案 > 当我需要不同的宽度时，如何处理 CSS 网格中的动态列数？

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

问题描述

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

标签： csscss-grid

解决方案

试试这个：

.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

推荐阅读