My grid crashed a live site because I forgot about the auto placement algorithm

I was building a new feature for a local bakery's site in Austin, and I had a perfect 12-column grid for their menu. I added a new 'seasonal specials' section with 3 items, but I didn't set grid-auto-flow to 'row'. The browser's default 'column' flow shoved the new items into a weird 13th column, breaking the whole layout on mobile. The site looked broken for about 20 minutes before I caught it. I fixed it by adding 'grid-auto-flow: row;' to the container. Has anyone else been tripped up by the auto-flow default when adding dynamic content?

2 comments

2 Comments

janahenderson19d ago

You mentioned the browser created a weird 13th column. Did you have any column templates set, or was it just a set number of columns and the new items forced an implicit grid track?

grant56919d ago

Actually the default is 'row' not 'column'. The browser makes new rows by default, not columns. Maybe you had something else overriding it?