Is there a way to make sure there will always be maximum 2 rows in the list?-CodePudding

I have a dynamic list. Is there any way to make sure that there will always be maximum 2 rows in the list (if there are too many items in the list, the remaining ones should disappear)? Is it possible?

ul{
display: flex;
flex-wrap: wrap;
}

li{
padding: 10px;
border: solid green 1px;
list-style: none;
}

<ul>
  <li> list item 1</li>
  <li> list item 2</li>
  <li> list item 3</li>
  <li> list item 4</li>
  <li> list item 5</li>
  <li> list item 6</li>
  <li> list item 7</li>
  <li> list item 8</li>
  <li> list item 9</li>
  <li> list item 10</li>
  <li> list item 11</li>
  <li> list item 12</li>
  <li> list item 13</li>
  <li> list item 14</li>
  <li> list item 15</li>
  <li> list item 16</li>
  <li> list item 17</li>
  <li> list item 18</li>
  <li> list item 19</li>
  <li> list item 20</li>
  <li> list item 21</li>
  <li> list item 22</li>
  <li> list item 23</li>
  <li> list item 24</li>
  <li> list item 25</li>
  <li> list item 26</li>
  <li> list item 27</li>
  <li> list item 28</li>
  <li> list item 29</li>
  <li> list item 30</li>
</ul>

CodePudding user response：

You can achieve something like that with a trick when using a CSS grid:

ul {
  display: grid;
  column-gap: 2px; /* you cannot use grid-gap! */
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: 0;
  overflow-y: hidden; /* hide grid items that overflow */
}

li {
  padding: 10px;
  border: solid green 1px;
  list-style: none;
  margin-bottom: 2px;
}

<ul>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
  <li> list item </li>
</ul>

After defining grid-template-rows for the first two rows you can use grid-auto-rows to set the height of all following rows to 0 which you can hide by using overflow-y: hidden;, ultimately.

Unfortunately, it will bug out when you use grid-gap to ensure spacing between elements, so you can compensate it by using column-gap with margin-bottom on the children.

CodePudding user response：

One method would be set li items to static height, then ul height can be calculated to limit only 2 rows, hiding the rest:

ul{
--li-height: 3em;
--li-padding: 10px;
--li-border: 1px;
font-size: 0.5em;

display: flex;
flex-wrap: wrap;

max-height: calc((var(--li-height)   ((var(--li-padding)   var(--li-border)) * 2)) * 2);
overflow: hidden;
}

li{
padding: var(--li-padding);
border: solid green var(--li-border);
list-style: none;
height: var(--li-height);
}

.resize
{
  resize: horizontal;
  border: 1px solid black;
}

<div>resize container</div>
<ul >
<li> list item 1</li>
<li> list item 2</li>
<li> list item 3</li>
<li> list item 4</li>
<li> list item 5</li>
<li> list item 6</li>
<li> list item 7</li>
<li> list item 8</li>
<li> list item 9</li>
<li> list item 10</li>
<li> list item 11</li>
<li> list item 12</li>
<li> list item 13</li>
<li> list item 14</li>
<li> list item 15</li>
<li> list item 16</li>
<li> list item 17</li>
<li> list item 18</li>
<li> list item 19</li>
<li> list item 20</li>
<li> list item 21</li>
<li> list item 22</li>
<li> list item 23</li>
<li> list item 24</li>
<li> list item 25</li>
<li> list item 26</li>
<li> list item 27</li>
<li> list item 28</li>
<li> list item 29</li>
<li> list item 30</li>
</ul>

CodePudding user response：

li:nth-child(1n 2) {
  display: none;
}

<ul>
  <li> list item 1</li>
  <li> list item 2</li>
  <li> list item 3</li>
  <li> list item 4</li>
  <li> list item 5</li>
  <li> list item 6</li>
  <li> list item 7</li>
  <li> list item 8</li>
  <li> list item 9</li>
  <li> list item 10</li>
  <li> list item 11</li>
  <li> list item 12</li>
  <li> list item 13</li>
  <li> list item 14</li>
  <li> list item 15</li>
  <li> list item 16</li>
  <li> list item 17</li>
  <li> list item 18</li>
  <li> list item 19</li>
  <li> list item 20</li>
  <li> list item 21</li>
  <li> list item 22</li>
  <li> list item 23</li>
  <li> list item 24</li>
  <li> list item 25</li>
  <li> list item 26</li>
  <li> list item 27</li>
  <li> list item 28</li>
  <li> list item 29</li>
  <li> list item 30</li>
</ul>

CodePudding user response：

The issue here is that your <ul> container has no explicit width set. Without it, it will try to fit as many child items as possible. Decide how wide you want your container to be to see how many child elements can fit on each row, and then display: none those that would start a third row.

In the code below, I've set the container to be 500px wide, which fits 5 of your child list items per row (at an explicit 75px each). The selector li:nth-child(1n 11) will remove the 11th element onwards.

ul{
display: flex;
flex-wrap: wrap;
width: 500px;
}

li{
padding: 10px;
border: solid green 1px;
list-style: none;
width: 75px
}

li:nth-child(1n 11)
{
display:none;
}

<ul>
<li> list item 1</li>
<li> list item 2</li>
<li> list item 3</li>
<li> list item 4</li>
<li> list item 5</li>
<li> list item 6</li>
<li> list item 7</li>
<li> list item 8</li>
<li> list item 9</li>
<li> list item 10</li>
<li> list item 11</li>
<li> list item 12</li>
<li> list item 13</li>
<li> list item 14</li>
<li> list item 15</li>
<li> list item 16</li>
<li> list item 17</li>
<li> list item 18</li>
<li> list item 19</li>
<li> list item 20</li>
<li> list item 21</li>
<li> list item 22</li>
<li> list item 23</li>
<li> list item 24</li>
<li> list item 25</li>
<li> list item 26</li>
<li> list item 27</li>
<li> list item 28</li>
<li> list item 29</li>
<li> list item 30</li>
</ul>