How to remove unused columns / rows in CSS Grid

user_12461393 0
Viewed 252

I'm working on a widget that will display up to 8 articles spread vertically across two columns. In the event of this widget showing less than 4 articles, I would like to avoid the extra space. I tried tons of things but without success and due to me not being very familiar with scripts, I would like to avoid them, if it can be done without them.

This is what I have so far :

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

If you know some css grid I don't, please let me know :D

css-grid css
1 Answers

Don't set explicit columns and rows. These are the tracks you define using grid-template-columns and grid-template-rows.

Let the implicit grid do the work for you. It will create columns and rows as needed. The default sizing for these tracks is grid-auto-rows: auto and grid-auto-columns: auto.

You just need to set the items in their proper columns.

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>

If you need the background colors to remain in their columns, add this to you container:

grid-template-columns: 1fr 1fr
user_35972760
Related