Kevin Powell - Community•2w ago

Why do grid gaps get bigger during transition

As you can see here: https://codepen.io/Lko3001/pen/gOVLwVz, when you hover over the card, there's a weird space between the title and the description, it's caused from the grid-template-row but I dont understand why and how to fix it

20 Replies

b1mind•2w ago

Do you need the outline? or is that for testing? My solution was just to put align-content: end; in the grid parent. that way it all starts from the bottom if you keep the outline though it will grow before the children You could also play with adding a animation/keyframes.

lko•2w ago

@b1mind even with align-content: end and without the outline there's still the same problem

b1mind•2w ago

b1mind•2w ago

what happens is the gird needs to calculate height then animate, so its still happening just now its above the text, 1fr takes up all remaining space with auto. So if you keep on the outline you will see it still works the same but your auto stays end of its cell while it happens

lko•2w ago

@b1mind sorry I put it on the .grid before, now it works, and thanks for the explanation, I still dont understand why there's that space tho. I get that it needs to calculate the height but why isn't it doing at the same time as the text? Also yeah I need to learn how to use justify-items and align-content better

b1mind•2w ago

acutally I was wrong its auto that is creating the space you can click on grid inspector and see it.

lko•2w ago

Yeah I know but what else can I use instead of auto

b1mind•2w ago

grid grows auto kinda goes derp mmm personally I wouldn't probably do this with animating grid. but I've also not played with it cause its still rather new I know there is still some jank though xD

lko•2w ago

how would you do it? I don't want to use js or hardcode stuff

b1mind•2w ago

hidden on the card and translate 🤷‍♂️

lko•2w ago

? oh wait

b1mind•2w ago

better said, you need to learn content/items for grid better when to use content when to use items

lko•2w ago

No how would you do it? because if I put translate on the .content-wrapper it doesnt affect the position of the title, I was thinking about doing something like margin-bottom: -100% but 100% is the height of all the text

b1mind•2w ago

I have to run but I'm sure this will nerd snipe someone.

lko•2w ago

yeah probably

b1mind•2w ago

If not I'll maybe make a demo when I get home I'm sure there are lots on codpen already though

lko•2w ago

Thanks anyways The only "solution" i found is to do something like this, the problem is that i'm hardcoding a value in max-height and the animations are weird when you do that. But that's the best I got

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: 100%;
}

.container {
  max-width: 200px;
  height: 500px;
  display: grid;
  align-items: end;
  position: relative;
  
  & > * {
    grid-column: -1/1;
    grid-row: -1/1;
  }
  
  .img-wrapper {
    height: 100%;
  }
  
  .text {
    position: absolute;
    bottom: 0;
    width: 100%;
    .description {
      
      .description-wrapper {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
    }
  }
  
  &:hover {
    .text {
      .description {
        .description-wrapper {
          max-height: 100px;
        }
      }
    }
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: 100%;
}

.container {
  max-width: 200px;
  height: 500px;
  display: grid;
  align-items: end;
  position: relative;
  
  & > * {
    grid-column: -1/1;
    grid-row: -1/1;
  }
  
  .img-wrapper {
    height: 100%;
  }
  
  .text {
    position: absolute;
    bottom: 0;
    width: 100%;
    .description {
      
      .description-wrapper {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
    }
  }
  
  &:hover {
    .text {
      .description {
        .description-wrapper {
          max-height: 100px;
        }
      }
    }
  }
}

<div class="container">
  <div class="img-wrapper"><img src="https://unsplash.it/500" alt=""></div>
  <div class="text">
    <div class="title">This is the title</div>
    <div class="description">
      <div class="description-wrapper">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto quidem dolorum sint aliquam quae, et commodi iure autem unde. Minima?</p>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="img-wrapper"><img src="https://unsplash.it/500" alt=""></div>
  <div class="text">
    <div class="title">This is the title</div>
    <div class="description">
      <div class="description-wrapper">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto quidem dolorum sint aliquam quae, et commodi iure autem unde. Minima?</p>
      </div>
    </div>
  </div>
</div>

clevermissfox•2w ago

Interpolate-size : allow-keywords is going to solve this issue. And calc-size()

lko•2w ago

Yeah I know but they're not supported basically anywhere

Gaming

Programming

Why do grid gaps get bigger during transition