CSS (Grid), auto resize unknown number of items, row and columns, 100% height and width

Question

I'm trying to render a dynamic (css) grid with unknown number of items (javascript generated).

What I need is to have all items (obviously resized) in width 100% and height 100%.

Examples:

1 item: big square
2 items: 2 big squares (2 horizontal columns)
3 items: screen in 4 squares, 1, 2, 3 divs, 4 (latest one) empty
4 items: screen in 4 squares
and so on...
1920 items (on 1920x1080 display): every item resized very very small (maybe just one pixel or less considering gap between) (with no text inside) in the same number of columns and rows (but this is just an extreme example, just for meaning!)

What I have done alone: https://jsfiddle.net/fredhors/s4k3z9t2/8/

CSS:

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 10vmax);
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}

here is a good strating idea: https://stackoverflow.com/a/54928586/8620333 where you can control the number of row/column so you can easily set them with JS — Temani Afif, Mar 05 '19 at 21:49
I don't think so ...one dimension is possible with flexbox, but two dimension would be tricky — Temani Afif, Mar 05 '19 at 22:19
What's wrong with what you have? What part of it _isn't working_? — elbrant, Mar 08 '19 at 03:04
@elbrant it doesn't resize items. Columns number is fixed (10vmax). — Fred Hors, Mar 08 '19 at 18:48

score 6 · Answer 1 · answered Mar 08 '19 at 22:26

6

The error was in the grid-template-columns: repeat();: I used a minmax column width of 9% to allow for all ten columns to appear across the page with 1fr to distribute the remaining space to the gutters.

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9%, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}

<div class="grid-wrapper">
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
</div>

Big or small, it does it all! ;)

answered Mar 08 '19 at 22:26

elbrant

763
5
16

it doesn't really change from mine: `minmax(9%, 1fr)` here is not the problem. I still have fixed number of columns like this. – Fred Hors Mar 09 '19 at 22:57
If you have 10 or more items, yes. If you have 4 items, you get 4 columns. Isn't that what you wanted? – elbrant Mar 09 '19 at 23:17
2

no unfortunately. What I need is a variable number of items each time. – Fred Hors Mar 10 '19 at 02:32
1

Can you explain that better? The CSS (above) will work no matter how many items you have - so, extremely flexable. Do you want a maximum of 10 columns across the page? Or do you want it to just fit, no matter how many items you give it, and let the system decide how many across the page? – elbrant Mar 10 '19 at 02:35
3

Please remember that I am trying to help you, and you are asking for something that is impossible. You say you want _"every item resized very very small (maybe just one pixel or less"_, but there is no way to give you an item that is _less than one pixel_. You also say you want the items to be 100%, but the title suggests that you want the CSS to automatically resize the items based on how many are on the page. I'm not sure what you want. Please clarify your question. – elbrant Mar 10 '19 at 15:15

CSS (Grid), auto resize unknown number of items, row and columns, 100% height and width

1 Answers1