CSS卡灵活的行为

问题描述：

我目前正试图在不使用语义UI的情况下创建此效果。链接codepen：https://codepen.io/anon/pen/YxBOax CSS卡灵活的行为

<div class="ui container"> 
    <div class="ui four cards stackable"> 
    <div class="teal card">Card1</div> 
    <div class="teal card">Card2</div> 
    <div class="teal card">Card3</div> 
    <div class="teal card">Card4</div> 
    <div class="teal card">Card5</div> 
    <div class="teal card">Card6</div> 
</div> 
</div>

正如你可以看到这里，你只需要设置类“UI四张牌可堆叠的”，然后你可以为你想最大限度地添加尽可能多的卡的div 4张牌一排。当达到一定尺寸时，它会跳到单行。

在我的应用程序的用户能够为他想，这不会使人们有可能为每4卡创建的行添加尽可能多的卡...

我怎么做，有效的帮助下纯CSS？目前我正在进入CSS网格，也许这可以帮助我？

谢谢！

请检查并评论我的答案，并让我知道如果有什么不清楚或丢失。如果不是，那么如果你能接受最能帮助你的答案，那将是非常好的。 – LGSon

当用户花自己的空闲时间来帮助你时，你至少可以做出反应，并且由于你选择了不这样做，所以我删除了我的答案。 – LGSon

答

这里有一个简单的CSS版本使用CSS网格：

revised codepen

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, 20%); 
 
    justify-content: space-between; 
 
    grid-gap: 20px; 
 
    padding: 20px; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    background-color: gray; 
 
} 
 

 
.card { 
 
    background-color: whitesmoke; 
 
} 
 

 
@media (max-width : 500px) { 
 
    .container { 
 
    grid-template-columns: 1fr; 
 
    } 
 
}

<div class="container"> 
 
    <div class="card">Card1</div> 
 
    <div class="card">Card2</div> 
 
    <div class="card">Card3</div> 
 
    <div class="card">Card4</div> 
 
    <div class="card">Card5</div> 
 
    <div class="card">Card6</div> 
 
</div>

有关这些特性是如何工作的解释，看到这个帖子：

CSS-only masonry layout but with elements ordered horizontally

CSS卡灵活的行为

相关推荐