如何在CSS网格中删除未使用的列/行

OG Altmayer 发表于 Dev

和奥特迈尔

我正在开发一个小部件，它将最多显示垂直分布在两列中的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

迈克尔·本杰明

不要设置明确的列和行。这些是您使用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>