Question

我目前正在尝试在不使用语义UI的情况下创建此效果。链接到codepen：https://codepen.io/anon/pen/YxBOax

NotesComponent

正如你在这里看到的，你只需要设置“ui four cards stackable”这个类，然后就可以添加任意数量的卡片div，最多连续4张卡片。当达到一定尺寸的小尺寸时，它会跳到单行。

在我的应用程序中，用户可以根据需要添加任意数量的卡，这样就无法为每4张卡创建行...

如何在纯CSS的帮助下有效地做到这一点？目前我正在进入CSS Grid，也许这可以帮助我？

谢谢！

Answer 1

这是使用CSS Grid的纯CSS版本：

revised codepen

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

有关这些属性如何工作的说明，请参阅以下文章：

CSS-only masonry layout but with elements ordered horizontally

CSS卡灵活行行为

1 个答案: