Loading…
19
Pro tip: don't pay $25 for a "CSS Grid generator" when 10 lines of code do the same thing
Okay so last weekend I was building a little photo gallery for my cousin's landscaping site and I got lazy. I was scrolling around and found this tool that promised to spit out a perfect grid in one click. It cost $25 and I figured hey, save my brain some work. I plugged in my column numbers, hit export, and pasted the code into my file. The gallery looked fine on my laptop but the second I opened it on my phone everything blew up into a single crooked column. Turns out the generator wrapped everything in a bunch of divs with inline styles and fixed pixel values, so my media query was doing nothing. I went back to the tool and it wanted another $9 for the "responsive add on." I closed the tab and wrote grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) myself in about two minutes and it just worked everywhere. So yeah, I paid $25 to learn a lesson I could have skipped. What's the dumbest grid shortcut you've ever fallen for?
1 comments
Log in to join the discussion
Log In1 Comment
jennifer_fisher3d ago
Wait, they charged you extra for the responsive add on? That is a whole new level of shady. It's like buying a car and then finding out the steering wheel costs extra. The kicker is that one line you wrote is literally the whole fix, and it's free and it's been in every CSS tutorial since like 2018. I once paid 15 bucks for a "grid layout app" that just made a bunch of float based columns and called it a day. Learned the same lesson you did, except mine broke on a tablet instead of a phone.
4