Change CSS grid-area size based on child size change

Question

trying to create a "fluid grid" interaction using hover states.

Goal: When hovering over a card that is within a grid, the card increases in size and "pushes" the other cards in other columns and rows making them smaller.

Problem: I thought using the "auto" size for the grid parent would work, but it's not. Code below

.shape-card-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.shape-card {
  width: 100%;
  height: 100%;
  background: blue;
  border-radius: 64px;
  cursor: pointer;
  overflow: hidden;
  transition: background 300ms cubic-bezier(0.66, 0.11, 0.03, 0.96);
}

.shape-card:hover {
  width: 105%;
  height: 105%;
}

<div class="shape-card-container">
  <div class="shape-card">
   
  </div>
  <div class="shape-card">
    
  </div>
  <div class="shape-card">
   
  </div>
  <div class="shape-card">
   
  </div>
</div>

Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) — tacoshy, Nov 30 '21 at 21:07
What you are looking for is called masonry layout. However as off now there is only firefox in "beta"-modus supporting it so far. — tacoshy, Nov 30 '21 at 21:08
OP's requested behavior doesn't seem to have anything to do with a masonry layout, which is a way to create a vertical-oriented, multi-column, grid-based layout of elements if different heights (and sometimes widths). — TylerH, Nov 30 '21 at 21:53

connexo · Answer 1 · 2021-11-30T20:54:21.207

The problem is your percentage-based approach, which can never work, because it is fundamentally flawed by concept.

When used in width or height, percentages relate to the containing context, which in this case, is the grid cell.

Resizing the content of a grid cell 105% will always make your element exceed the grid cell it's placed in.

If the grid cell would resize accordingly to accomodate for the increase in size, how would the element be 105%? It only is 105% if the containing context does not resize accordingly, otherwise in that resized scenario it would be 100% of the resized cell again (which would violate the rules defined for :hover).

When you use pixel-based values along with min-content instead of auto, the grid does what you expect:

.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, min-content);
  grid-template-rows: repeat(2, min-content);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.cell {
  width: 200px;
  height: 100px;
  background: blue;
  border-radius: 64px;
  cursor: pointer;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.66, 0.11, 0.03, 0.96);
}

.cell:hover {
  background-color: teal;
  width: 250px;
  height: 150px;
}

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

thanks, how might you go about this if you needed the children to always fill the available grid area — davallree, Nov 30 '21 at 20:58
I don't think that is even conceptually possible, it's sort of a chicken-egg problem. You want the items to be sized according to their cell, and you want the cell to be sized according to their items. Pick either. — connexo, Nov 30 '21 at 21:03
@davallree You would need to use JavaScript to calculate the size first, most likely. Here's a recent/concurrent question where the user ran into the same problem (and there are a couple CSS answers and a couple JS answers that might help; NB, one of the CSS answers (irrelevant to your specific issue, though) is mine): https://stackoverflow.com/questions/70132709/pull-up-an-element-in-the-document-flow — TylerH, Nov 30 '21 at 22:05

Change CSS grid-area size based on child size change

1 Answers1