Is it possible to place more than one element into a CSS-Grid-Cell without overlapping?

Question

I have three columns and one row and I want to place each grid-element into one of the three resulting cells. This is what I want, using three container-elements:

main {
  display: grid;
  grid-template-columns: 33% 33% auto;
  grid-gap: 15px;
}

.container {
  background-color: orange;
}

.element {
  transition: height 0.5s;
  margin: 15px;
  height: 100px;
  background-color: grey;
}

.element:hover {
  height: 200px;
}

<main>
  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>

  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>

  <div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</main>

I know that this would be possible using three containers, but I want to avoid using anything which isn't really 'necessary'.

Using multiple rows and expanding an element from one to two or three rows wouldn't be as "smooth" as in the example I posted above. However, using multiple rows and just resizing an element resizes the complete row, which affects the position of the next row.

A solution would be to place each element of the same column into the same cell. That way there's one row at most, and each time an element gets resized, it only affects the position of the elements in the same column, which is exactly what I want.

The problem when placing multiple elements in the same cell is that they keep overlapping and I found no way to stop them from doing that.

So is there a way to place multiple elements in the same cell without overlapping using only the css-grid layout?

Wahhabi

what you want to do from img is 3 cols and at least 3 rows, element need to be set spanning through a few rows : jsfiddle.net/9b5abp3e/1 reminder/tutorial : css-tricks.com/snippets/css/complete-guide-grid it works for both col and row , thats the thing about the grid CSS layout jsfiddle.net/9b5abp3e/2 and for your sketch it could be something like jsfiddle.net/9b5abp3e/3 or jsfiddle.net/9b5abp3e/4 – Australasia

"I know that this would be possible using three containers, but I want to avoid using anything which isn't really 'necessary'." I'm confused... you are using 3 containers. I don't know if you can do this with CSS Grid (it tends to expect a fixed-size) but you can do something very close with just normal CSS properties: jsfiddle.net/qq8nsk0g/1 – Respirator

You can "sort of" if you style the cell as a grid/subgrid or flexbox but as you said - more containers. – Distracted

Answer 1

Elements that are assigned to the grid will not have any flow applied, there is no way around it. They will be slapped onto the grid one over the other, just as if they were absolutely positioned. They will obey any z-index value, though.

This is because the specification explicitly states that the elements are allowed to overlap, if they are assigned to areas that intersect.

Also, the specification encourages to mix grid with flexboxes, to obtain more complex layouts.

Gelatinoid

It's too bad you can't apply a flow to a grid cell, since otherwise it seems like you're forced to add wrapper elements in order to combine grid & flexbox. – Bubo

@NathanArthur See github.com/w3c/csswg-drafts/issues/4416 for a proposal that would solve the issue – Echopraxia

Answer 2

you can't really manage the flow like you would in flexbox. but if you had two items or three items in a single grid cell. if you can manage the height

you can try this. it's not perfect but can be used as a hack

element1 {
  align-self: start;
}

element2 {
  align-self: center;
}

element3 {
  align-self: end;
}

Convivial