Can CSS Grid open up interesting CMS Layout options?

I love hand crafting layout in CSS Grid. Ask my co-workers. They’re tired of hearing about it.

Nothing is going to stop me from hand-coding my CSS. What about people who write no CSS, though? Can we use Grid to open up a world of new layout options to CMS users?

That’s not a rhetorical question. I want to hear opinions on this.

I’ve created a very simple prototype. To all my friends who write good JavaScript, I apologize. Don’t look at the JS panel and you’ll be happier. The CodePen is here and embedded at the bottom of the article.

In this example, there are three components on a six-column grid. The doesn’t have rows specified, but is adjusting the implicit rows via grid-auto-rows.

With simple markup and ugly JavaScript, I created an interface to let a user select grid areas. Using this interface, a user can take this layout:

The starting point for the grid

And change it to these layouts:

Changing the layout based on user input

As a CSS purist, I’m always wary of ceding my control over to JavaScript or a CMS database. Does this enable a CMS user more interesting controls than otherwise possible?

Try it for yourself

Keep in mind, you’ll need at least Firefox 52 or Chrome 57.

See the Pen Grid CMS Interface by Bryan Robinson (@brob) on CodePen.

What do you think? Good idea? Bad idea? Overkill?

Keep in mind before answering, I know that Grid is in its infancy of support. These are important questions for the future.

You May Also Enjoy

Top 3 uses for the ::before and ::after CSS pseudo elements

It’s no secret that I'm a fan of ::before and ::after pseudo-elements. I use them to great effect for creating darkened overlays in this previous post. They have so many uses beyond that, though. Here are my top 3 uses for them in my every-day development process.

How To: Use CSS Grid to Mix and Match Design Patterns

In a previous tutorial, I described how to create a simple fluid card grid with CSS Grid. In this tutorial, we'll take it a step farther and create promotional spaces that morph in interesting ways.

How To: Use CSS :after pseudo-elements to create simple overlays

Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!

My Side Projects

Web Workers Logo Web Workers Logo Web Workers Logo Web Workers Logo