The characters Totoro, Satsuki and Mei on the Bus Stop scene from the animation My Neighbor Totoro made with pixel art

Creating pixel art with CSS Grid

Jun 20, 2019

Would you imagine successful games and design concepts becoming so popular because of a limitation? That’s what pixel art tries to achieve - the feeling of nostalgia brought by the memories of glorious old games. That’s because old consoles initially had limited CPU to handle graphics. To overcome that, game designers had to get the most out of each pixel. Small colored squares strategically placed with purpose and daring you to use your imagination.

Super Mario Bros character developed by Nintendo.

CSS Grid

If you don’t know the basics of Grid Layout, I recommend checking this awesome video by Jen Simmons.

Pixel art for the web

There’s this useful grid cheat sheet I recommend while building layouts. I had just got back from a party and might have being a little bit drunk - that’s the best time to start new projects btw - and it seemed to me that the tiny squares on the sheet looked like pixel art.

I’ve searched for someone doing it and found nothing, so I decided to experiment on my own. My first draw is this simple cat. I took me four hours to finish because it didn’t come to my mind I just needed to fill the colored pixels.

Jiji, the cat.

It’s a dull job. To avoid that later, I’ve created a pixel art editor which generates sprites into HTML & CSS. You can actually animate sprites using CSS animation. I’ll get into the details of that in this article.

How it works

The grid container specifies columns and rows - hhow many and their sizes. The grid items declare where they will fit into those available spaces. For the purpose of creating pixel art, the grid container is the canvas and the grid items are the pixels.

See the Pen How CSS Grid works for drawing Pixel Art by Jackie Card (@jackiecard) on CodePen.

Let’s draw!

You can start by “setting up” the canvas. For instance, I want to draw a pink heart that is 5x5 pixels. We’ll use five columns with any size we want. For very tiny sprites, I use 40px.

.canvas{
  display: grid; 
  grid-template-columns: repeat(5, 40px); // same as: 40px 40px 40px 40px 40px
  grid-template-rows: repeat(5, 40px);
}
<div class="canvas">
</div>

The best part of using CSS Grid is that you don’t need to fill pixel by pixel. If you have a continuous line or a rectangle, you can go ahead and add the coordinates using grid-area.

.line-1{
  background: #f6757a;
  grid-area: 2 / 1 / 4 / 2;
}
<div class="canvas">
  <div class="line-1"></div>
</div>

Grid-area is a shortcut for the following properties:

  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 2;

If I wanted to fill the whole canvas, I’d only need one grid item with ‘grid-area: 1/1/6/6’, for example.
Graphic how grid area works

There’s many ways you can fill in the lines. Ideally, you would search for the one that uses less elements. In this case, that’s both the first and last option.

You can easily scale it up and down by just updating the grid item size:

grid-template-columns: repeat(5, 10px);
grid-template-rows: repeat(5, 10px);

Animating the sprites

I have a heart and would like it to change colors infinitely. For that, let’s create the sprites and line it one above the other, like this:

Wrap it in two div elements. One will crop the animation (only show the current sprite) by using ‘overflow: hidden’. The div inside will be animated to go up by using a negative margin. If you’re familiar with building sprites using images and background position, this is no news.

<div class="animation">
  <div class="wrapper">
    <div style="display:grid;grid-template-columns:repeat(5,40px);grid-template-rows:repeat(5,40px);">
        <div style="background:#f6757a;grid-area:1/2/2/3"></div>
        <div style="background:#f6757a;grid-area:1/4/2/5"></div>
        <div style="background:#f6757a;grid-area:2/1/3/6"></div>
        <div style="background:#f6757a;grid-area:3/1/4/6"></div>
        <div style="background:#f6757a;grid-area:4/2/5/5"></div>
        <div style="background:#f6757a;grid-area:5/3/6/4"></div>
    </div>
    <div style="display:grid;grid-template-columns:repeat(5,40px);grid-template-rows:repeat(5,40px);">
        <div style="background:#68386c;grid-area:1/2/2/3"></div>
        <div style="background:#68386c;grid-area:1/4/2/5"></div>
        <div style="background:#68386c;grid-area:2/1/3/6"></div>
        <div style="background:#68386c;grid-area:3/1/4/6"></div>
        <div style="background:#68386c;grid-area:4/2/5/5"></div>
        <div style="background:#68386c;grid-area:5/3/6/4"></div>
    </div>
  </div>
</div>

For the animation, we use steps for timing to have that harsh change from one sprite to the other. The size of my animation depends on my grid settings, which in this case are 5 x 40px = 200px.

@keyframes sprite{
  0% {margin-top: -0px;}
  50% {margin-top: -200px;}
  100% {margin-top: -200px;}
}
.animation{overflow: hidden; height: 200px; width: 200px;} 
.animation .wrapper{animation: sprite 1s steps(1) infinite;}

Make it interactive!

If you click on the Totoro, he will make it rain. Since the output is just HTML with classes and styles, you have control over the DOM. It’s simple to make the animations get triggered by events.

See the Pen Totoro Bus Stop w/ Grid Layout | Daily CSS Images by Jackie Card (@jackiecard) on CodePen.

Box Shadow

Box Shadow is more commonly used for creating pixel art with CSS. The trick is simple: you have a square with multiple square shaped shadows that you can position using the box shadow’s offset effects. The downside of this technique towards using Grid is that you have to color pixel by pixel, instead of lines and rectangles. Also, it’s practically impossible to use the browser inspector to debug.

On the other hand, the output is an elegant single div and the generated code is lightweight. In the example below, I use script to show each pixel in iteration, but you can see the real thing here.

See the Pen How Box Shadow works for drawing Pixel Art by Jackie Card (@jackiecard) on CodePen.

Overall

The overall experience of creating pixel art with CSS Grid is very good. Yes, it’s a hell lot of HTML and not very accessible, but it’s promising. For instance, you can open the inspector and see for yourself exactly what was build on this page. If you make mistakes, it’s easy to spot and fix. You can build sprites with it. You can add a little bit of script and have it interactive. Maybe build a game using it, why not?

More examples of pixel art using CSS Grid here.