如何折叠（删除一行）在明确声明的 CSS 网格布局中没有内容的行？

Question

问题类似于How do you collapse unused row in a CSS grid?，但我的行已明确声明。

我有一个类似于以下设计的 CSS 网格：

但是，每当我没有 content/limited 内容时，就会出现一些不需要的行。我如何删除这些行，因为它在我的设计中添加了不需要的 space？

我想我不能使用 grid-auto-rows 或任何东西，因为我想要那个布局，为此我需要定义我的 CSS.

中的行

ref: 当内容不足时我的布局看起来如何。

请检查codepen：

含内容：https://codepen.io/asim-coder/pen/JwJzWx
无内容：https://codepen.io/asim-coder/pen/mawomJ

.card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr 2fr;
  grid-gap: 5px;
}
.card * {
  /*   styles for demonstational purposes */
  background: #02750b;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.card :nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
}
.card :nth-child(5) {
  grid-area: 3 / 2 / 5 / 3;
}
.card :nth-child(4) {
  grid-area: 2/ 1 / 4/ 2;
}
.card :nth-child(6) {
  grid-area: 2/ 3 / 4/ 4;
}

p  {
  padding: 5px;
  background: #b5b53f;
}

<div class="card">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<p>Some thing after the content</p>

Answer 1

您正在容器级别定义行。

.card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr 2fr;
  grid-gap: 5px;
}

但内容是在网格项目级别处理的。

因此，当容器被要求布局显式轨道时，它会在不考虑内容存在的情况下完成工作。

在您的情况下，当内容出现或消失时，容器规则没有变化，因此没有理由让行消失。

但我看不出有任何理由需要明确的行来使此布局有效。把它们拿出来。

请注意 fr 单位在容器中免费分发 space。但是你还没有在容器上设置高度，这意味着没有免费的 space 可以分配。这可能会导致主流浏览器出现意外行为（取决于他们选择如何呈现这种情况）。尝试在容器上设置一个高度以获得更正确和稳定的行为。

.card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-rows: 2fr 1fr 1fr 2fr; */
  grid-gap: 5px;
}
.card * {
  /*   styles for demonstational purposes */
  background: #02750b;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.card :nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
}
.card :nth-child(5) {
  grid-area: 3 / 2 / 5 / 3;
}
.card :nth-child(4) {
  grid-area: 2/ 1 / 4/ 2;
}
.card :nth-child(6) {
  grid-area: 2/ 3 / 4/ 4;
}

p  {
  padding: 5px;
  background: #b5b53f;
}

<div class="card">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<p>Keep in mind you're using <i>fr</i> units in a container with no defined height. So expect free space to be distributed unevenly across examples.</p>


<div class="card">
  <div>1</div>
  <div>2</div>
  <div>3</div>
 </div>
<p>less space = smaller <i>fr</i> units = potentially shorter grid areas (browser behavior may vary)</p>

如何折叠（删除一行）在明确声明的 CSS 网格布局中没有内容的行？

How can I collapse a row (remove a row) which doesn't have content in an explicitly declared CSS grid layout?

html

css

grid-layout

css-grid