grid-flow-col behaving strangely

[jayrdi]

I am following the Statamic tutorial collection on YouTube and have created some placeholder blogs, with this index page:

When I navigate to the page though, I see that they only display on a single row, and that grid-cols-2 is making the first two blogs 0 width:

If I change to grid-cols-3, I get this:

Can anyone explain what is happening here?

Thanks

[duncanmcclean]

Are you running Laravel Mix? npm run watch

[jayrdi]

Yes, running Laravel Mix and using npm run watch. Also tried clearing cache (as that had been an issue before).

[austriker27]

Does it work if you drop that code into https://play.tailwindcss.com/? I'm guessing its something with your local build process because at first look the tailwind looks right.

[jayrdi]

"play.tailwind" seems to be down; I can't access it. Anyway, someone on Reddit suggested removing grid-flow-cols as they thought it was unnecessary to have as well as grid-cols-2. It did the trick. Maybe something changed in the way that the browser interprets that since the tutorial was made?

[jasonvarga]

play.tailwindcss.com

[jayrdi]

Ah, that's very handy, thanks. I'll bookmark that!