是否可以将多个元素放入CSS-Grid-Cell而不重叠？

我有三列和一行，我想将每个网格元素放入三个结果单元格之一。这就是我想要的，使用三个容器元素：是否可以将多个元素放入CSS-Grid-Cell而不重叠？

main { 
 
    display: grid; 
 
    grid-template-columns: 33% 33% auto; 
 
    grid-gap: 15px; 
 
} 
 

 
.container { 
 
    background-color: orange; 
 
} 
 

 
.element { 
 
    transition: height 0.5s; 
 
    margin: 15px; 
 
    height: 100px; 
 
    background-color: grey; 
 
} 
 

 
.element:hover { 
 
    height: 200px; 
 
}

<main> 
 
    <div class="container"> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    </div> 
 
</main>

我知道，这将使用三个容器是可能的，但我想避免使用任何事情是不是真的“必要”。

使用多行并将元素从一行扩展为两行或三行将不会像我在上面发布的示例中那样“平滑”。但是，使用多行并仅调整元素的大小会调整整行，这会影响下一行的位置。

解决方案是将同一列的每个元素放到同一个单元格中。这种方式最多只有一行，每次元素被调整大小时，它只影响同一列中元素的位置，这正是我想要的。

将多个元素放置在同一个单元格中的问题是，它们保持重叠，我发现无法阻止它们这样做。

那么有没有一种方法可以将多个元素放置在同一个单元格中，而无需仅使用css网格布局进行重叠？

来源

2017-07-23 asdfsolider

你想从img做什么是3 cols和至少3行，元素需要跨越几行设置：https：//jsfiddle.net/9b5abp3e/1/提醒/教程：https：// css-tricks.com/snippets/css/complete-guide-grid/它适用于列和行，这是关于网格CSS布局https://jsfiddle.net/9b5abp3e/2和你的草图它可能是像https://jsfiddle.net/9b5abp3e/3/或https://jsfiddle.net/9b5abp3e/4/ –

“我知道这可能使用三个容器，但我想避免使用任何不是'真的“必要”。“我很困惑......你*使用3个容器。我不知道你是否可以用CSS Grid来做到这一点（它倾向于期望一个固定大小），但你可以用一般的CSS属性做一些非常接近的事情：https：//jsfiddle.net/qq8nsk0g/1/ – TylerH

分配给网格的元素将不会应用任何流，因此无法绕过它。他们会一个接一个地上网，就好像他们是绝对定位一样。不过，他们会服从任何z-索引值。

这是因为规范explicitly states允许元素重叠，如果它们被分配到相交的区域。

此外，规格encourages混合网格与柔性盒，以获得更复杂的布局。

来源

2018-03-01 10:10:46 Palantir

是否可以将多个元素放入CSS-Grid-Cell而不重叠？

回答

相关问题