网格项目扩展以跟随列之间的偏移量[重复]

Question

我正在尝试制作一个 html/css 卡片系统，它会自动将自己放置在 css 网格上。这个 CSS 网格分为两列。在左列中，一个 div 为该列的其余部分添加了一个偏移量，并且没有固定大小。我想在两列之间保持这个偏移量。

问题是左边的第一张卡片（数字 2）会增长以补偿偏移量，但所有卡片必须具有相同的大小。在不固定每张卡的大小的情况下如何解决这个问题？

我想做的事：

我目前拥有的：

重现它的简单代码示例：

.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}

.grid__1 {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 5px;
  font-size: 1rem;
}

.grid__item {
  grid-column: span 1;
  grid-row: span 2;
}

<div class="grid">
  <div class="box grid__1">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>

我在这里做了一个活生生的例子：https://jsfiddle.net/rLpqt75d/3/

Answer 1

我做了一些研究，看起来您正在尝试复制曼森式布局。 如果你不知道它是什么，那就是 pintarest 使用的布局。
谷歌搜索了一段时间后，我发现了一篇很棒的文章，你可以看看：
https://kulturbanause.de/blog/responsive-masonry-layout-mit-css/

我将尝试总结： 以后我们会得到一个css属性：grid-template-rows: masonry;

但在那之前，我们将不得不坚持使用 flex-box。

我将博客文章的示例复制到小提琴中，并对其进行了一些修改以获得更好的概述：
https://jsfiddle.net/8k1nyg39/41/

希望我能帮助别人（：

编辑： 所以我用它做了一些试验，看起来你需要为你的容器预定一个高度......

如果您需要您的容器动态更改高度，我所知道的唯一剩下的解决方法就是像 Magic Grid 这样的 js 库 ...

Answer 2

为属性 grid-auto-rows 定义一对行，这将设置正确的大小：

.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  
  grid-auto-rows: 40px 200px; /* added */
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}
.grid__1 {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 5px;
  font-size: 1rem;
}

.grid__item {
  grid-column: span 1;
  grid-row: span 2;
}

<div class="grid">
  <div class="box grid__1">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>

Answer 3

/* height is your var */
.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 40px 1fr;
  height: 100vh;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}
.grid__head {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 15px;
  font-size: 1rem;
 
}

.grid__item {
  grid-column: span 1;
  grid-row: span 2;
}

<div class="grid">
  <div class="box grid__head">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>

enter link description here

Answer 4

在.grid__item 上从grid-row: span 2 切换到span 3（或4 个）。

.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}

.grid__1 {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 5px;
  font-size: 1rem;
}

.grid__item {
  grid-column: span 1;
  grid-row: span 3;  /* ADJUSTMENT */
}

<div class="grid">
  <div class="box grid__1">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>

---

问题是左边的第一张卡片（编号 2）会增长以补偿偏移量，但所有卡片必须具有相同的大小。

如果您将项目从跨越两行 (grid-row: span 2) 改为跨越三 (grid-row: span 3) 或四行，项目可以更好地吸收偏移高度。

2 行（原始布局）——注意行的布局

3 行（修改后的布局）

这也可能是一个替代方案：CSS-only masonry layout