Getting Started

CSS Grid is a terrific web technique for two-dimensional layouts, and I see a lot of potential for formatting web comics. Below I have a quick demo of the type of nine-panel layout that responds to screen widths. At screen widths above 667px, you’ll see 3 x 3 panel arrangement that you may see in a graphic novel. At widths between 501px and 667px, it has a two column layout. And at widths below, all the panels stack within one column.

1
2
3
4
5
6
7
8
9
The End

Here is the code.

 



/* overall container */
.grid-container {
  margin-bottom: 20px;
}
/* grid template */
.grid-template {
  margin: 0px auto;
  width: 470px;
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  font-family: "Arial";
  font-size: 20px;
  justify-content: stretch;
}
/* individual grid element */
.grid-el {
  min-height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* colors */
#el-1 {
  background-color: #aaccee;
}
#el-2 {
  background-color: #ccddaa;
}
#el-3 {
  background-color: #ddccee;
}
#el-4 {
  background-color: #eeccaa;
}
#el-5 {
  background-color: #ccaaee;
}
#el-6 {
  background-color: #6699dd;
}
#el-7 {
  background-color: #ffcc55;
}
#el-8 {
  background-color: #66BB88;
}
#el-9 {
  background-color: #DD8899;
}
#el-10 {
  background-color: #aaccee;
  display: none;
}
/* show two columns at widths between 501px and 667px */
@media screen and (max-width:667px) {
  .grid-template {
    grid-template-columns: 150px 150px;
    width: 310px;
  }
}
/* show the ending panel only on the two-column display */
@media screen and (min-width:501px) and (max-width:667px) {
  /* show the last optional panel so each column has same number of panels */
  #el-10 {
    display: flex;
  }
}
/* show one column at widths of 500px and below */
@media screen and (max-width:500px) {
  .grid-template {
    grid-template-columns: 150px;
    width: 150px;
    grid-column-gap: 0px;
  }
}

Check out this example on CodePen.

A few things to notice:

  • I am giving the overall container, grid-container, a pre-defined width and centering it for each screen width.
  • In both the main code and the media queries, grid-template-columns determines how many columns you have.
  • Each panel has the class .grid-el, which has a minimum height of 200px.
  • The .grid-el class has display: flex, which I use to center the text inside it.
  • I am using grid-row-gap and grid-column-gap for the gutters. Because both are 10px, I could also theoretically use grid-gap for brevity.
  • You’ll notice that an extra panel shows up in the two-column view so that each column has the same number of panels. At the two other width ranges, this final panel is simply hidden with display: none. This technique may not be ideal in all cases, but I just wanted to toss it out as an example of how to handle different numbers of columns across a range of screen widths.

CSS grid holds a great many possibilities for rendering comics in responsive ways, and is a terrific example of how art and tech are two sides of same coin. Below are a few resources related to comics and CSS grid.

Resources

Once again, here is the CodePen example.

For a comprehensive guide to CSS Syntax, check out The complete guide to CSS Grid on CSS-Tricks.

Learn about CSS grid and view a similar example of this layout on W3Schools.com.

In his book Reinventing Comics, author Scott McCloud discusses the web medium as creating the potential for an “infinite canvas.” Because it was written before the advent of smartphones, its predictions do not completely mirror the current day - though the book does speak to the vast potential of comics as a digital medium.

To learn about my comics-based science science resource books, Dr. Birdley Teaches Science, and see some examples of how I present illustrations on the web, check out birdleymedia.com. I have had a longstanding interest in using comics as an educational medium and it is exciting to begin experimenting with their use on the web.