3 years of fighting CSS Grid and I just now got it working right

Last month I spent 6 hours trying to get a 3 column layout to stack properly on mobile and nearly threw my laptop out the window. Turns out I was missing the auto-fill keyword on my repeat function the whole time. Anyone else have a moment where one tiny property made everything click?

2 comments

2 Comments

the_taylor11d ago

And nobody's gonna mention how grid makes you rethink your whole damn HTML structure? Like I had this project where I kept fighting with overlapping items. Tried every combination of grid-row and grid-column. Finally realized I needed to completely restructure my source order. That auto-fill thing you mentioned though... man that was my wake up call too. Once you understand that implicit grids are actually your friend and not your enemy everything just flows different.

grant_torres11d ago

The "completely restructure your source order" bit hit me right in the chest (like a surprise flexbox bug). I swear my first grid project had me rearranging my HTML like I was playing some twisted game of Tetris with divs. I kept trying to force elements where I wanted them with grid-column: span 3 and they'd just refuse to cooperate. It was basically me going "you will fit here" and the browser going "nah, I don't think I will". Once I accepted that the grid is the boss of me (not the other way around), everything got way less painful. Still have nightmares about that one time I tried to overlay a header on top of a hero image though.