Justin, from WPTavern, has recently posted an article considering whether WordPress needs a grid system. As a designer, I am inclined to say yes.
I have been using the Layout Grid plugin, that Justin mentions, for a couple of months now and I really like it. Superficially you can recreate all the layout grid layouts with the columns block. But it feels a lot more robust.
The addition of consistent columns, and gutters, and better control of the responsive output, gives a sense of control that I don’t feel with the columns block. The columns block lacks a sense of permanence. The fact you can resize columns to any percentage makes consistent designs (in particular by non-designers) very difficult.
Now, I have issues with the plugin as well. The biggest of which is that the front end CSS is 60.3kb, which for a grid layout is huge, and on this website would triple the size of the average page load. As an aside, I have created an issue about this problem on Github but it’s yet to have a response. Hopefully it can be addressed since performance online is very important and I’d like to use the plugin publicly.
But I believe the goal with the Layout Grid plugin is to contribute back some of the learnings to the core WordPress project, and I would be very happy if a variation on this plugin was one of the things introduced.
Speaking personally, I have wanted to build some sort of grid plugin for a couple of years now, but I haven’t been able to work out a structure I am happy with; one that allows flexibility without complexity.
Having done some research I currently favour the grid block in the Atomic Blocks block collection. It’s a halfway house between the complexity of Layout Grids, and the simplicity of the core columns block.
Hopefully a core grid system will be introduced in the future, that will make creating interesting designs super easy.
Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.