1cec0ld Comments - Answer Overflow

1cec0ld

Posts Comments

KPCKevin Powell - Community

•Created by 1cec0ld on 1/4/2024 in #front-end

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

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

9 replies

KPCKevin Powell - Community

•Created by 1cec0ld on 1/4/2024 in #front-end

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

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

9 replies

KPCKevin Powell - Community

•Created by 1cec0ld on 1/4/2024 in #front-end

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

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

9 replies

KPCKevin Powell - Community

•Created by 1cec0ld on 1/4/2024 in #front-end

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

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"

9 replies

Gaming

Programming