Superhero Layout — CSS Layering Panels

Feel free to jump straight to the CodePen example.

5 Panel comic layout from Spider-man 2018 #9. Several panels overlap to create a more unique layout
Spider-man 2018 #9 — Marvel Comics

Creating the grid

So far in the series we relied on implicit grid sizing but we are changing things up to explicit sizing now. It’ll make positioning panels easier when using line numbers — you’ll see this soon. Here’s the layout we are going to create based on Spider-man 2018.

6 panel comic layout inspired by Spider-man 2018 with a similar vertical layout with panels layered
6 panel comic layout inspired by Spider-man 2018 with a similar vertical layout with panels layered
.comic {
display: grid;
grid-template-columns: 1fr 6fr 4fr 9fr 6fr repeat(2, 1fr);
grid-template-rows: 16px 2.35fr 1fr 0.5fr 0.3fr
1fr 1fr 0.35fr 0.45fr 1.25fr;
}
Spider-man 2018 layout with the total height of 985px and lines drawn representing each row’s start and end totalling 9
Spider-man 2018 layout with the total height of 985px and lines drawn representing each row’s start and end totalling 9
Calculating the row size
Single panel size is 291px with an equation of 291 divided by 109 to equal 2.6
Single panel size is 291px with an equation of 291 divided by 109 to equal 2.6
Calculating an individual panel size
6 panel vertical comic layout with panel-3 and panel-4 overlaid on the panels
6 panel vertical comic layout with panel-3 and panel-4 overlaid on the panels
.panel-3 {
grid-row: 4 / 7;
grid-column: 5 / span 1;
z-index: 1;
}
.panel-4 {
grid-row: 5 / 9;
grid-column: 2 / -2;
}
6 panel vertical layout grid with vertical lines number 1 to 8 along each column of the grid
6 panel vertical layout grid with vertical lines number 1 to 8 along each column of the grid
CSS Grid lines
6 panel vertical layout grid with vertical lines number -2 to -8 along each column of the grid from right to left
6 panel vertical layout grid with vertical lines number -2 to -8 along each column of the grid from right to left
CSS Grid lines in reverse
Adding a new grid line
.panel-4 {
grid-column: 2 / 7; // off by one
grid-column: 2 / 8; // new value
}

Accessibility

Layering is an exciting addition to our layout tool boxes. But, we need to consider more than the layout it enables. Sticking with the Spider-man theme, and to quote the great Uncle Ben, “with great power, comes great responsibility!”.

Side-by-side 6 panel vertical layouts. Second comic’s panel has moved up into the first panel position.
Side-by-side 6 panel vertical layouts. Second comic’s panel has moved up into the first panel position.

More layers

The modern age of comics made prolific use of layering. It’s an approach to break free of boxes that have constrained designs and layout for many years.

Page from Hawkeye #1 next to a CSS Grid recreation showing a layered panel approach
Page from Hawkeye #1 next to a CSS Grid recreation showing a layered panel approach
Hawkeye #1 — Marvel Comics

Posts in the Superhero Layout series

Thanks

Thanks to Patima Tantiprasut, Corey Ginnivan and Dominic Sebastian for their valuable review feedback!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store