40

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
asdfsolider
  • 503
  • 1
  • 4
  • 5
  • 1
    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 : https://jsfiddle.net/9b5abp3e/1/ reminder/tutorial : https://css-tricks.com/snippets/css/complete-guide-grid/ it works for both col and row , thats the thing about the grid CSS layout https://jsfiddle.net/9b5abp3e/2 and for your sketch it could be something like https://jsfiddle.net/9b5abp3e/3/ or https://jsfiddle.net/9b5abp3e/4/ – G-Cyrillus Jul 23 '17 at 12:29
  • "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: https://jsfiddle.net/qq8nsk0g/1/ – TylerH Aug 25 '17 at 18:35

2 Answers2

39

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.

Palantir
  • 23,820
  • 10
  • 76
  • 86
  • 45
    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. – Nathan Arthur Aug 28 '18 at 12:34
  • 2
    @NathanArthur See https://github.com/w3c/csswg-drafts/issues/4416 for a proposal that would solve the issue – Creepin Jun 28 '20 at 20:49
0

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;
}
Stefan T
  • 111
  • 8