Kevin Powell - Community•5mo ago

CSS for variable length list to create new columns at a max count

I have a site that is fetching a list of items. That list can be 0, or up to 20 items, rarely more, the most I've seen is 42. I'm trying to organize them into a div such that if there are more than 10 items in the column, it starts a second column. At 20 items, it would start a third column. To further complicate things, each item consists of 3 "pieces" (ID, Description, Flag) that I'd like to align with the others in that column.

-------------------List Heading--------------------
ID1   Desc1         Flag1     ID11   Desc11  Flag11
ID2   Decription2   Flag2
...repeat to 10...

-------------------List Heading--------------------
ID1   Desc1         Flag1     ID11   Desc11  Flag11
ID2   Decription2   Flag2
...repeat to 10...

I just saw Kevin's video on Flex versus Grid and thought I had an idea, but using <div style="display: flex; flex-direction: column; max-height: 100px;"> just shrunk my items. (This will be moved into class/css file after testing). It also didn't contribute to the 3-piece alignment. I can't find anything like a Max-Count or Max-Children. His note at the end indicated flex-direction:column is a warning sign to look at Grid instead, but all the Grid examples I find insert the children horizontally with 1 & 2 on the top row before going downward. Is there a grid-direction equivalent? I have 2 YOE but CSS isn't my strength, and after seeing that video I'm hoping someone here has some insight to guide me. Thanks in advance!

7 Replies

MarkBoots•5mo ago

if you are using js to fetch the items, you can also assign the column for the item to be in

1cec0ld•5mo ago

Just found grid-column-start, so that could work if I can get the JS change approved. Not sure right now because I'm only working on the HTML template "can you add a spot to insert this data replacing ---variable--- with the value" Good news, I found something that looks close:

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

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

So that gives me the vertical flowing 10 items, now I just need to figure out alignment of the pieces

MarkBoots•5mo ago

here my example unfortunatly the grid will allways fill left to right first (also with auto flow column). So you'll need to assign each item to a column index. with subgrid you can place the subitems. There is some maths involved, but together with js, that shouldnt be a problem https://codepen.io/MarkBoots/pen/dyrGeKX

Mark Boots

CodePen

dyrGeKX

...

1cec0ld•5mo ago

I don't have a CodePen account to share, but thoughts on this?

<div class="container">
  <div class="grid-container">
    <div class="grid-item"><span>id 1</span><span>desc 1</span><span>flag 1</span></div>
    <div class="grid-item"><span>id 2</span><span>desc 2</span><span>flag 2</span></div>
    <div class="grid-item"><span>id 3</span><span>description 3</span><span>flag 3</span></div>
    <div class="grid-item"><span>id 4</span><span>desc 4</span><span>flag 4</span></div>
    <div class="grid-item"><span>id 5</span><span>desc 5</span><span>flag 5</span></div>
    <div class="grid-item"><span>id 6</span><span>desc 6</span><span>flag 6</span></div>
    <div class="grid-item"><span>id 7</span><span>desc 7</span><span>flag 7</span></div>
    <div class="grid-item"><span>id 8</span><span>desc 8</span><span>flag 8</span></div>
  </div>
</div>

<div class="container">
  <div class="grid-container">
    <div class="grid-item"><span>id 1</span><span>desc 1</span><span>flag 1</span></div>
    <div class="grid-item"><span>id 2</span><span>desc 2</span><span>flag 2</span></div>
    <div class="grid-item"><span>id 3</span><span>description 3</span><span>flag 3</span></div>
    <div class="grid-item"><span>id 4</span><span>desc 4</span><span>flag 4</span></div>
    <div class="grid-item"><span>id 5</span><span>desc 5</span><span>flag 5</span></div>
    <div class="grid-item"><span>id 6</span><span>desc 6</span><span>flag 6</span></div>
    <div class="grid-item"><span>id 7</span><span>desc 7</span><span>flag 7</span></div>
    <div class="grid-item"><span>id 8</span><span>desc 8</span><span>flag 8</span></div>
  </div>
</div>

.container {
  width: fit-content;
}
.grid-container {
    display: grid;
    grid-template-rows: repeat(5, 20px);
    grid-auto-flow: column;
}

.grid-item {
  display: grid;
  grid-template-columns: 100px 200px 100px
}

.container {
  width: fit-content;
}
.grid-container {
    display: grid;
    grid-template-rows: repeat(5, 20px);
    grid-auto-flow: column;
}

.grid-item {
  display: grid;
  grid-template-columns: 100px 200px 100px
}

It seems the only limitation is the fixed width Description column

MarkBoots•5mo ago

i was lying, you can totally do it with css and grid/subgrid alone (no fixed widths) https://codepen.io/MarkBoots/pen/bGZEKqz

Mark Boots

CodePen

bGZEKqz

...

1cec0ld•5mo ago

Ooo and that's without the --column-index, I like it! Thank you!

MarkBoots•5mo ago

Gaming

Programming

CSS for variable length list to create new columns at a max count