Defining the number of rows in CSS grids

Question

I have a slightly hypothetical question:

If I had a <ul>, and I wanted to use css grids to display the <li> in a vertical list, is there a way to automate this, so that if the number of <li> changed, the number of rows would increase/decrease automatically?

Example:

ul {
  display: grid;
  grid-template-rows: repeat(NUM, 1fr);
}

<ul>
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

Here the NUM specifies the number of rows in the template, but if I were to add another <li> I would then have to go and change the NUM value.

Is there a way to recognise the number of child elements and set the number of rows automatically accordingly?

I am asking hypothetically in case I have missed any cdd grid specs, - I am not looking for any hacks around, and especially am not looking for a javascript workaround - it just seems a little too inflexible not to have the option to automate this, I am new to grids and am just figuring out how it works.

Temani Afif · Accepted Answer · 2020-01-21 10:01:22Z

2

Simply define grid-auto-rows and you don't need to know the number of items

ul {
  display: grid;
  grid-auto-rows:1fr;
  margin:10px;
  padding:0;
}
ul li {
  border:1px solid;
  list-style-type:none;
}

<ul>
  <li>item <br>one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

<ul>
  <li>item <br>one</li>
  <li>item two</li>
  <li>item three</li>
  <li>item two</li>
  <li>item three</li>
</ul>

<ul>
  <li>item <br>one</li>
  <li>item two</li>
</ul>

If a grid item is positioned into a row or column that is not explicitly sized by grid-template-rows or grid-template-columns, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row or column that is out of range, or by the auto-placement algorithm creating additional rows or columns. The grid-auto-columns and grid-auto-rows properties specify the size of such implicitly-created tracks. ^ref

edited Jan 21, 2020 at 10:01

answered Jan 21, 2020 at 9:55

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonny Over a year ago

Thank you - this is what I was after - I thought this attribute was only for sizing each row. It works as I expected it to, thanks.

Temani Afif Over a year ago

@Jonny I thought this attribute was only for sizing each row it's indeed for that purpose and if you make all the row having the same size it's like you make you N rows having the same size so whataver the number of rows, they will have the same size

Rishabh Tanwar · Accepted Answer · 2020-01-21 10:16:30Z

-1

just try (grid-template-columns) property with auto-fill and minmax(minimum size you want to give one item,maximum size you want to give one item),use fr(fraction) to give max size to get responsive grid effectively.And add repeat to automatically applying this property.

ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  }

edited Jan 21, 2020 at 10:16

answered Jan 21, 2020 at 10:11

Rishabh Tanwar

11 bronze badge

Collectives™ on Stack Overflow

Defining the number of rows in CSS grids

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related