0

.container {
  display: grid;
  grid-row-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  grid-template-rows: repeat(auto, 200px);
}

#A {
  grid-column-start: 1;
  grid-column-end: 2;
}
<div class=“container”>
  <div id=“A”></div>
  <div id=“B2></div>
  <div id=“B3></div>
  <div id=“B4></div>
  <div id=“B5></div>
  ...more dynamic lines
</div>

With this schema I get this behavior:
enter image description here

that is great for me. Each row height is adjusted according to the max height of the divs it contains.
Divs B have all regular sizes but div A does not.

When div A goes taller from client side (some on click expand the box variable heights) I get this:
enter image description here Divs B1, B2 and B3 are too long, each content is at top.

So I am asking if is it possible to get something like this:
enter image description here First div B 2 rows / 3 cols the same height, B1-B6 a bit taller than if they have not to share the row with div A.
The row starting with div 7 has not enough height to place at right of div A.

Edit:
I am thinking getting div A height (JS), divide it by 170pix (floor) to get how many 3 blue column rows are needed to change grid style.

dstonek
  • 945
  • 1
  • 20
  • 33
  • look at : https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row – G-Cyrillus Nov 27 '20 at 19:01
  • I was looking at some cc-tricks pages but didn't get with the key – dstonek Nov 27 '20 at 19:06
  • you should first check your html validity and selectors .. container!=containter ;) – G-Cyrillus Nov 27 '20 at 19:33
  • :) It was just a typo here :) – dstonek Nov 27 '20 at 19:37
  • Not using flow in rows unless you specify that the first element will span two rows. I suspect that you want this to be dynamic which is much more complex. – Paulie_D Nov 27 '20 at 20:50
  • @Paulie_D Yes. I edited the question. JS is required to get the div A height – dstonek Nov 27 '20 at 21:33
  • what about the type of quotes you use and some of them not closed on ids ? make a working snippet that demonstrate your issue, it will help you to find out where you got wrong and if not will let us see your issue clearly. From what i see, it is only about typo and a div supposed to be standing on row 1 untill it reaches row 2 (1 row only) . – G-Cyrillus Nov 28 '20 at 12:00
  • I found the solution with js from de client side. Div A must have height so set it via jquery and the grid-row values too. In Chrome it didn’t work at first because I had set separate start/end grid-raw values but changing then by a single line`grid-row: 1 / n` fixed the issue. I am not able to post the question because it is marked as duplicate – dstonek Nov 28 '20 at 13:47

0 Answers0