css - 如何删除 CSS Grid 中未使用的列/行

Question

我正在开发一个小部件，该小部件最多可以显示 8 篇垂直分布在两列中的文章。如果此小部件显示的文章少于 4 篇，我想避免多余的空间。我尝试了很多东西但都没有成功，并且由于我对脚本不是很熟悉，所以我想避免使用它们，如果没有它们也能完成的话。

这是我目前所拥有的:

article {
  background: lightblue;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 1em;
  grid-auto-flow: column;
  margin-bottom: 1em;
}

/* Styling Purpose */

div {
  padding: 0.5em;
}

div:nth-child(odd) {
  background: lightgray;
}

article.yes {
  grid-template-rows: repeat(3, 1fr);
}

<h1>OK</h1>
<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
  <div>Article 4</div>
  <div>Article 5</div>
</article>

<h1>Not OK</h1>
<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
</article>
<h1>What I want</h1>
<article class="yes">
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
</article>

https://codepen.io/HitArrowLegend/pen/bGBRvZR

如果你知道一些我不知道的 css 网格，请告诉我 :D

Answer 1

不要设置显式列和行。这些是您使用 grid-template-columns 和 grid-template-rows 定义的轨道。

让隐式 网格为您完成这项工作。它将根据需要创建列和行。这些轨道的默认大小是 grid-auto-rows: auto 和 grid-auto-columns: auto。

您只需要在适当的列中设置元素。

article {
  display: grid;
  grid-column-gap: 1em;
  grid-auto-flow: column;
  margin-bottom: 1em;
  background: aqua;  /* adjusted for easier viewing */
}

 /* place items 1-4 in column 1 */
div:nth-child(-n + 4) { grid-column: 1; }

/* place items 5-8 in column 2 */
div:nth-child(n + 5):nth-child(-n + 8) {
  grid-column: 2;
}

/* Styling Purpose */
div {
  padding: 0.5em;
}
div:nth-child(odd) {
  background: gray; /* adjusted for easier viewing */
}

<article>
  <div>Article 1</div>
</article>

<article>
  <div>Article 1</div>
  <div>Article 2</div>
</article>

<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
</article>

<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
  <div>Article 4</div>
</article>

<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
  <div>Article 4</div>
  <div>Article 5</div>
</article>

<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
  <div>Article 4</div>
  <div>Article 5</div>
  <div>Article 6</div>
</article>

<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
  <div>Article 4</div>
  <div>Article 5</div>
  <div>Article 6</div>
  <div>Article 7</div>
</article>

<article>
  <div>Article 1</div>
  <div>Article 2</div>
  <div>Article 3</div>
  <div>Article 4</div>
  <div>Article 5</div>
  <div>Article 6</div>
  <div>Article 7</div>
  <div>Article 8</div>
</article>

如果您需要背景颜色保留在它们的列中，请将其添加到您的容器中:

grid-template-columns: 1fr 1fr