html - 如何折叠在明确声明的 CSS 网格布局中没有内容的行(删除行)？

Question

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

我有一个类似于下面设计的 CSS 网格:

但是每当我没有内容/内容有限时，我就会在那里得到一些不需要的行。我该如何删除这些行，因为它会在我的设计中添加不需要的空间？

我认为我不能使用 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 单元在容器中分配可用空间。但是你还没有在容器上设置高度，这意味着没有可用的空间来分配。这可能会导致主流浏览器出现意外行为(取决于他们选择如何呈现这种情况)。尝试在容器上设置一个高度以获得更适当和稳定的行为。

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