Beautiful Mistakes: Coming Up with Unconventional Layouts with CSS Grid

CSS Grid is awesome and that is because it is a new tool that makes working with layouts much easier. This post is not going to be about how to work with CSS Grid; I think there are plenty of posts and resources out there. This is going to be a documentation of my creative process of coming up with unconventional layouts since CSS Grid gives me the freedom to do so. It could perhaps peak your interest in exploring CSS Grid.

In order to be familiar with CSS Grid, I started by converting Polygon’s masthead layout to a CSS Grid layout. It was pretty straight forward:

See the Pen Polygon Style Layout (Blog Version) by Ren Aysha (@rrenula) on CodePen.

I am intrigued by Polygon’s beveled edges and I decided to exploit that detail further. I started discovering more unconventional layouts by accident when I was tinkering with the code:

The accident above inspired this unconventional thumbnail presentation:

See the Pen Unconventional Thumbnail Presentation (Blog Version) by Ren Aysha (@rrenula) on CodePen.

It looks sexier on larger viewports but you get the point. The awesome thing about these accidents is that it results from a bug in my code but the bug leads to beautiful ideas. This morning, I was tinkering with the code again and a bug leads to this:

What if it looks like this on mobile devices? I think it looks pretty rad! I haven’t explore where I could take this but it is a possibility in the future.

At some point, I realize that I am coming up with all of these demos by just using grid-columns; I’ve yet to explore any advance CSS Grid features. So I decided to play with grid-template-areas in order to explore what else I can do. With grid-template-areas, I manage to come up with something quite boring and not so experimental:

See the Pen Gallery layout with CSS Grid’s grid-template-areas by Ren Aysha (@rrenula) on CodePen.

It looks nice but I am a bit disappointed that I didn’t get to come up with something much more interesting. However, this particular ‘boring’ layout manage to give birth to another experimental idea: comic books.

Comic book layouts are pretty much grid layouts but it is an unconventional one. In certain layouts, the author actually use the layout grid itself in order to make the story more interesting by conveying suspense or anticipation.

I grew up reading Japanese manga, so it is not surprising that my thought process leads me to one of my favourite things. I decided to explore the comic book layout idea by using CSS Grid and Clip Path. This is what I ended up with:

See the Pen Comic book style layout with CSS Grid by Ren Aysha (@rrenula) on CodePen.

Out of all of my experiments, the comic book layout is the most popular. It shows that creativity itself is an iteration; you wouldn’t get to your goals immediately but with exploration, you can get some interesting and unexpected results. It will not always be pretty but once you get something that you like, it is going to be very beautiful.

I hope I manage to spark your interest in playing with CSS Grid. You can start by rebuilding an existing layout and see where it goes from there. You don’t even have to start with anything fancy. Iterate through your first demo and I believe you can come up with something impressive.

  • Andre Greeff

    Very inspiring post… Thanks for sharing!

    Though I must admit, with regards to the layout issues you run into that inspire these ideas, I wouldn’t really call them “bugs” because, technically, you haven’t finished building it yet.. (: But this is still a pretty cool way to be creative.

    • I’m glad you find it informative! You’ll be surprise at what you can come up with just by exploring!

  • KonRud5

    Nice article. Have you tried to do the same comic book layout but with the img tags instead?
    I’ve tried some and turned out that it was trickier than I thought.
    here have a look: https://goo.gl/6AiUXp

    • It is more tricky with img since you will find that the image won’t fill out the entire image container when you resize your browser. I believe there is a hack that we can apply to this by using min-height and position: absolute with top, bottom, left, and right values as 0. I’ve yet to try it though.

  • I had no idea this was possible this way, thanks for the informative, inspirational article.
    Your flair for improvisation is not lost on me, I appreciate you.

    • Thank you for the kind words. 🙂

  • DavidAFrench

    How robust is this solution? In particular with using clipath, do you have to do a lot of hand editing for each layout or can it be fairly procedural?

    • The comic book version is not the most robust solution since it was more of an experiment done in less than 30 minutes. And it is not accessible too since we use CSS bg image instead of image tags. With clip-path, I had to do a lot of hand editing to get what I want.

      • DavidAFrench

        Ah yeah that makes sense. There are some ways to change background image properties inline so that a cms backend can edit it but sounds like that might still be difficult for getting stuff to fit together nicely. Still very impressive!