Does WordPress Need a Grid System?

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.

How was it for you? Let me know on BlueSky or Mastodon

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.