0

Like the title says, I'm trying to create a 2 column grid where the smaller cell sets the height of both columns. Is this achievable with css?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Colin S
  • 123
  • 7
  • you know the smallest cell? – Temani Afif Jan 09 '23 at 22:42
  • no, the height of the smaller cell is not defined – Colin S Jan 09 '23 at 22:56
  • As far as I know, this is not possible with pure CSS, because the largest container "pushes" the box into place. It would be possible to find out the height of both containers with JavaScript and then set the height to the larger container. Important: with page resize the calculation has to be done again. – Felix Ranesberger Jan 09 '23 at 23:13
  • Can you also add your answer with the use case you want? Because if the smaller container should determine the height, the other container will overflow in height. – Felix Ranesberger Jan 09 '23 at 23:15
  • 1
    I am not talking about the height but the fact that you know which cell is the smallest one (you simply know it, its height doesn't matter). If it's the case, here is a duplicate: https://stackoverflow.com/q/48943233/8620333 – Temani Afif Jan 09 '23 at 23:35

1 Answers1

2

As @TemaniAfif mentioned, the solution was to add:

  contain: "size",
  overflow: "scroll",

to the larger cell in the grid. But it does negate any spacing styles. My workaround for this was to add a third cell in between the 2 grid items with a width of 12px (which was the initial margin size).

Colin S
  • 123
  • 7