网格项目扩展以跟随列之间的偏移

Question

我正在尝试制作一个 html/css 卡片系统，它会自动将自己放置在 css 网格上。此 css 网格被 div 分为两列。在左列中，一个 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

为属性 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 2

/* 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 3

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

The problem is that the first card on the left (number 2) grows to compensate for the offset, but all cards must have the same size.

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

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

3 行（修改后的布局）

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

Answer 4

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

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

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

我将博客 post 的示例复制到 fiddle 并对其进行了一些修改，以便更好地了解：
https://jsfiddle.net/8k1nyg39/41/

希望我能帮到别人(:

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

如果您需要容器动态改变高度，我所知道的唯一剩余解决方法是像 Magic Grid ...

这样的 js 库

网格项目扩展以跟随列之间的偏移

Grid items expand to follow offset between columns

html

css

css-grid