Grid columns using automagic

Hi,

I want to stack my projects using grid automagic, here is what I have:

.tile-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 2rem;
}

But the result is 1 project under the other regardless of window width. I have also tried altering minmax values and image sizes but it never creates two columns. What am I doing wrong? Please help.

https://codepen.io/damjanostrelic/pen/QWbxVEa

Try removing align-items: center on the .projects-container element.

1 Like

Wow, thank you. I wasted a lot of time on this stupid mistake, but probably won’t do it again!