Kevin Powell - Community•3mo ago

grid item auto stretch

Hi guys, I want the height of grid item fit-content but it auto stretch. I use align-self: start for grid item but it does not work. Can anyone help me explain why? Here is my css container

.container{
 display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  flex: 1;
}

.container{
 display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  flex: 1;
}

6 Replies

clevermissfox•3mo ago

I would recommend putting all your html/css/js into a codepen so someone can better help you debug. Also explain the behaviour youre looking for, you want it to fit content but you also want it to stretch? thats not possible with one element.

ἔρως•3mo ago

also, flex: 1 wont do what you expect

snxxwyy•3mo ago

if i understand correctly, i'm pretty sure you have to give your "cards" a height of 100% if they're not the direct children on that grid. Otherwise align-items: stretch; can't access them, only their containers.

b1mind•3mo ago

align-self will make them dense not stretch. start is also default so really I don't see why you used it in this case. also grid children fill by default so

b1mind•3mo ago

https://codepen.io/b1mind/pen/QWeWXqy

Brent Morton

CodePen

grid align-self dense

...

b1mind•3mo ago

had the screenshot up and noticed you made all the children flex col too 🤦‍♂️ ... use grid. Flex makes children dense by default too flex col is 90% of the time not what you want... I don't see why people over use it so much when you could just use grid (updated my pen)

Gaming

Programming

grid item auto stretch