将 4 个 div 级联排列为 4 列

Question

我需要排列 4 个层叠的 div，看起来像是 4 列。

这是我的html结构（我无法修改它）

<div class="col1">
    1111
    <div class="col2">
        2222
        <div class="col3">
            3333
            <div class="col4">
                4444
            </div>
        </div>
    </div>
</div>

我需要它在使用时看起来像：

display: grid;
grid-template-columns: repeat(4, minmax(200px, 1fr));

我也尝试过 grid-template-areas 但没有达到预期的结果。

Answer 1

好的，所以您需要容器是网格容器，然后元素都属于相同的子级别（即它们都需要属于相同的子元素）。因此你需要重构你的 html 来解决这个问题。这里有一个有用的链接，可以帮助您快速了解如何使用 css 网格。话虽如此，这里有一个 html/css 示例演示了您想要实现的目标。希望这可以帮助您有一个良好的开端。

请注意，此示例使用您的值，并将强制每列至少为 200 像素（您显然可以根据您的用例进行更改）。

.grid-container{
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

<div class="grid-container">
  <div class="col1">
    1111
  </div>
  <div class="col2">
    2222
  </div>
  <div class="col3">
    3333
  </div>
  <div class="col4">
    4444
  </div>
</div>