Welcome to part four of the CSS Grid Layout series! In this part, we combine the techniques from our previous posts with CSS Shapes to create a comic book layout with uniquely shaped panels. If you want to, you can jump straight to the CodePen demo. If you need a refresher on the previous posts take a look at staggered panels, layering panels, and CSS Subgrid. Let’s get into it.

Here’s the inspiration for our layout, from Generations: Phoenix and Jean Grey by Marvel Comics.

Generations: Phoenix and Jean Grey - Marvel Comics

It’s nice to see a layout that breaks out of the box. It’s even nicer that this is possible with CSS Grid. Everything we create is still going to be a rectangle, you can’t create a grid area that isn’t rectangular, but with clip-path, we can give the illusion of any shape we like.

Before we get started, browser support. IE11 doesn’t support clip-path and that isn’t going to change, so you’ll need to consider alternatives but with Edge swapping to Chromium we now have pretty great access to clip-path across browsers.

https://caniuse.com/#feat=mdn-css_properties_clip-path_basic_shape

Let’s get started with the container of our comic.

.comic {
  position: relative;
  background-image: url(space.jpg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

The comic consists of five panels each with an image inside.

.panels {
  display: grid;
  grid-template-columns: 3fr repeat(4, 1fr) 2fr;
}

You’re right to be wondering why there are only two visible images — the panels are overlapping. This is needed because the angles we create overlap and we need the image to be visible. If each was in its cell we wouldn’t get the same effect.

#grid #css