CSS Grid Layout Dynamic Rows

Question

I was wondering if there is a way to assign a dynamic number of rows and columns to a Grid layout without Javascript? Every example I've seen has also included some Javascript and as of now I'm working on a bare knowledge of only HTML and CSS (a student). What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS. I don't know if it's possible either, but it'd be nice if I could repeat just two rows as a basic layout, I want alternating colors between my rows and no other properties than to use them to place other content.

EDIT:

Well, I have tried to establish a grid with

<div class="grid-container"></div>
<div class="grid-item1"></div>
<div class="grid-item2"></div>
<div class="grid-item3"></div>...

The problem with going about it this way is I have to manually add a new grid item for every row or column I want. I found a partial solution in repeat.

.grid-container {
grid-template-rows: repeat(20, 10px);
}

But I'm unsure if this will mean that I will be left with scrolling white areas when I run out of rows and I will have to change my CSS, which I expect, or whether I will just have to go back to adding manually new grid-items. I am trying to find a way to specify to my CSS file, make an unknown number of rows so that as I add content, I don't have to manually add grid-items.

Answer 1

What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS.

I think what you're describing can be done using grid-auto-rows.

From MDN:

If a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.

Grid-auto-rows lets you set the size of implicit row tracks.

In the example below I have a basic four-column grid. Grid rows are being created implicitly, and are sized to be at least 20px, and at most, auto, or the maximum size of the content. You can adjust these parameters as you need.

I want alternating colors between my rows

See this similar question. Essentially, you can't do this. What you can do is use the nth-of-type selector to target specific items in a row.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(20px, auto);
  grid-gap: 1rem;
}

.grid__item {
  background: pink;
}

/* alternate styling of rows */
.grid__item:nth-of-type(8n + 5),
.grid__item:nth-of-type(8n + 6),
.grid__item:nth-of-type(8n + 7),
.grid__item:nth-of-type(8n + 8) {
  background: lightblue;
}

<div class="grid">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item">Grid rows will be at least 20px in height...</div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item">If content takes up more space, the grid item can expand to fit the content.</div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>