How do I set up n Autogrid Preset?
Can't seem to work this one out. Tried following Mark's video comparing Flex and Grid, but don't see any autogrid options anywhere. Mark seemed to use a preset in the video, so wondered how I could do this?
Hello Mike. Are you using KrafterPRO?
Alas, not at the moment. Just can't justify the cost as I only have one site and am trying to transition it to Divi 5.
Hi Mike.
You can get the Autogrid preset in KrafterPRO. Considering everything you get, the preset collection is very affordable. It’s not just the presets themselves; it also includes variables that apply responsive values using clamp().
The KrafterPRO color system is a brilliant solution (I’ve actually written an article about it) that uses color variables with scales that automatically adapt to your chosen primary and secondary colors, including grayscale and transparencies. Plus, Mak keeps adding other interesting features to the KrafterPRO.zip file.
I can explain how the Autogrid preset works here, but I won’t be sharing the actual code. In my view, that wouldn’t be fair to Mak, who clearly put a lot of effort into the KrafterPRO preset system.
What’s ingenious is that Autogrid uses a 'trick' to avoid dealing with overflow in the last box within Flexbox. While there are ways to set this up for every row, it would require manual intervention and might not be desirable for every situation. That’s why the Autogrid preset is such a great alternative—it saves you from having to adjust the Flexbox system every single time.
If you want to try it yourself, try building some cards or blurbs in Flexbox and see where you hit layout breaks or where it needs to switch for mobile. You’ll likely spend quite a bit of time experimenting (and getting frustrated when it doesn't look right immediately). Mak clearly thought this through early on or found an effective way to implement it. To even understand the underlying problem, I had to rebuild everything from scratch because I wasn't aware of this specific Flexbox behavior.
Once you have Mak’s Autogrid preset in your collection, I’m sure you’ll figure it out. I hope these hints help without giving away Mak's specific solution. If he chooses to explain the mechanics himself, that’s his decision, but I won’t be going any deeper into the technical details here.
Thanks for understanding!