Super Hero Layout — Combining CSS Grid and CSS Shapes

Super Hero Layout — Combining CSS Grid and CSS Shapes

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.

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 panelslayering 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.

Cover of Generations: Phoenix and Jean Grey, set in space with 5 panels along the bottom all with unique angles

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.

Image for post

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

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

The comic’s container. A4 shaped page with space themed background

.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.

Container with the panels div class and two panel images visible of a woman with her hands together and a cat

.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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Building a layout with CSS Grid Setting rows columns sizes in CSS grid

Bite-sized screencasts and tips about React, CSS and Javascript. we will see the CSS grid auto-placement in action and how we can make a CSS layout to span the full height of the screen.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

Building a hexagonal grid using CSS grid

I've been chasing the idea of using (abusing?) CSS grid to build a interconnected hexagonal grid, where each hexagon fits together seamlessly.

The Guide to CSS Grid

In this article, we’re going to learn more about a powerful layout system for creating amazing and beautiful layouts on the web—we’re going to learn about CSS Grid. We’re going to understand why this technology was created and what exactly it is, what problems it helps us to solve, its similarities to Flexbox, and how it works in modern browsers to allow us to create powerful layouts without having to add a lot of extra CSS code. Let’s learn about the new system for creating two-dimensional layouts in CSS called CSS Grid, compare it to Flexbox and learn how to customize awesome layouts.