行跨度而不影响其他行

Question

我正在尝试弄清楚如何在多行上显示 div 而不影响使用相同行的其他 div 元素的高度。

这是一个例子：

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
}

#navigation {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #CCC;
  grid-row: 1;
}

#hero {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #BBB;
  grid-row: 2;
}

#left1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 3;
  background-color: #AAA;
}

#left2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 4;
  background-color: #DDD;
}

#right {
  grid-column-start: 4;
  grid-column-end: 13;
  grid-row: 3/5;
  background-color: #EEE;
}

<div id="wrapper">
  <div id="navigation">NAVIGATION</div>
  <div id="hero">HERO IMAGE</div>
  <div id="left1">Left1</div>
  <div id="left2">Left2</div>
  <div id="right">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div>
</div>

名为 #right 的 div 总是比 #left1 和 #left2 长得多。如果我把它们放在一边，#right 会增加 #left1 和 #left2 的高度，我想避免这种情况。

我可以通过在网格定义中定义行高来解决这个问题，但我永远不能 100% 确定 #left1 和 #left2 会有多大。

示例：

grid-template-rows: 50px 400px 300px 300px auto;

这在尺寸不超过这些值时有效，但我需要的是对所有 div 元素采用“适合内容”的方法，而不在它们之间创建依赖关系。

网格可以实现吗？

谢谢

Answer 1

您的行设置为 auto 高度。

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr)); <--  ignored; overruled
  grid-template-rows: auto; <-- winning rule
}

这意味着第一行（显式网格）的高度将由内容高度决定。

其余行（隐式网格）的高度也将由内容高度决定，因为grid-auto-rows的默认设置也是auto。

这也意味着一个CSS网格规则生效：自由space在具有auto大小的网格轨道中被平分。

§ 11.8. Stretch auto Tracks

This step expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. If the free space is indefinite, but the grid container has a definite min-width/height, use that size to calculate the free space for this step instead.

所以当#left1和#left2与#right1共享相同的轨道时，免费space（在左侧区域创建，因为右侧区域较高）是平均分布在左侧区域。

但是如果 #right1 区域跨越一个空的、未定义的行（比方说，从 grid-row: 3/5 到 grid-row: 3/6）它不再绑定到 #left1 和 #left2 轨道，auto 拉伸算法不再适用。

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
}

#navigation {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #CCC;
  grid-row: 1;
}

#hero {
  grid-column-start: 1;
  grid-column-end: 13;
  background-color: #BBB;
  grid-row: 2;
}

#left1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 3;
  background-color: #AAA;
}

#left2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 4;
  background-color: #DDD;
}

#right {
  grid-column-start: 4;
  grid-column-end: 13;
  /* grid-row: 3/5; */
  grid-row: 3/6;   /* new */
  background-color: #EEE;
}

<div id="wrapper">
  <div id="navigation">NAVIGATION</div>
  <div id="hero">HERO IMAGE</div>
  <div id="left1">Left1</div>
  <div id="left2">Left2</div>
  <div id="right">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
    Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div>
</div>

老实说，我大约有 60% 的把握这个答案是完全正确的，80% 的把握是部分正确的。主要是因为跨越 #right 到一个新行仍然会在左列中创建一个新的（第三个）区域，据推测，它的大小也可能是 auto，就像它上面的两个兄弟姐妹一样。

那么为什么“#left3”的行为不像 #left1 和 #left2？（即平均分配免费space）

我认为这是因为“#left3”为空 (HTML) 且未定义 (CSS)。

无论如何，规范语言对我和上面引用的 Track Sizing Algorithm is much more complex than the Stretch auto Tracks 部分来说并不完全清楚。所以可能还有其他因素在起作用。

行跨度而不影响其他行

Row span without affecting other rows

css

css-grid