How to quickly prototype apps with CSS Grid and CSS Variables

CSS Grid and CSS Variables are both huge wins for front-end developers. The former makes it dead simple to create website layouts, while the latter brings the power of variables to your stylesheets.

In this tutorial, I’ll show you how to utilize them together in order to quickly prototype app designs.

The example we’ll use has been pulled directly from my free course on how to build a chat app using React.js and the Chatkit API:

Click the image to get to the course.

So if you prefer watching interactive screencasts over reading, check out lecture number 15 and 16 of my course here. In it, you’ll also get access to the code so that you can experiment for yourself as well. Feel free to do that as you follow this tutorial.

Setting up the grid container

Our app has been laid out using CSS Grid, a module which makes it easy to construct layouts and to shuffle around on them. This is especially useful if you’re taking advantage of the grid-template-areas property, which I’ll show you how we’re using further down.

Let’s first have a look at what our initial chat app looks like:

If we open up the dev tools in Chrome, we’ll be able to inspect how the underlying grid has been constructed. As you can see, it has six rows and six columns:

The code for creating such a grid is the following:

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
}

First, we’re setting the container to be a grid. Then we’re saying that we want six columns and that each of them should be one fraction unit (1fr) wide. One fraction unit means one part of the available space. So here we’re splitting the width into six equally wide fractions and give each column one fraction.

As for the rows, we’re not splitting all of them into equal height, as the last row isn’t as tall as the rest of them. We’ve explicitly told it to be 60px tall instead of 1fr tall:

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

Now that we’d laid out the structure of our grid, we can move on to the next part: positioning.

Positioning the grid items

Each direct child of a grid container is a grid item. We have four items, each being boxed into a rectangle in the image below:

In order to get the items to be placed in the positions they have above, we’ll need to use the grid-template-areas property and construct a visual representation of the grid in our styleeheet:

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";
}

Each of the strings represents a row and each of the characters represents a cell in the grid. The characters have a semantical relation to the grid items they are representing (room list, message list, new room form and send message form).

Now in order to position our items according to our grid-template-areas we’ll need to use the characters as their grid-area value. Like this:

.new-room-form {  
  grid-area: n;  
}

.rooms-list {  
  grid-area: r;  
}

.message-list {  
  grid-area: m;  
}

.send-message-form {  
  grid-area: s;  
}

These classes have of course also been applied to our grid items in our HTML. However, I won’t go into detail about that, as I’m assuming that you know how to add classes to HTML tags.

With this in place, we’re ready to start experimenting with the layout. By just swapping a few characters in the grid-template-areas value, we’re able to completely flip around on the layout.

In the gif above, I’m trying four different layouts through changing the positions of the room list item and the new room form item. The only thing I’m changing is the grid-template-areas property.

Below are the four variations. Try and see if you can map each of them to its corresponding layout:

grid-template-areas:  
    "n m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r s s s s s";

grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";

grid-template-areas:  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s n";

grid-template-areas:  
    "m m m m m n"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s r";

If you take my React.js chat app course, you’ll get your very own copy of the code, so that you can change the layout exactly how you prefer to have it.

Changing the colours with CSS Variables

Now we’re going to change the colours of the app using CSS Variables. If you haven’t been exposed to CSS Variables before, have a quick look at the images below, as they sum up the core of it:

As you can see from the image above, this makes your code easier to read, as the variable name is more semantical than the hexadecimal value. Secondly, it also gives you more flexibility in case you want to change the colour.

Let’s see how we’ve styled our app using CSS Variables, starting with our variable declarations:

:root {  
  --main-color:            #5ea3d0;  
  --secondary-color:       white;  
  --main-text-color:       #3e5869;  
  --secondary-text-color:  #b0c7d6;  
  --new-room-form:         #d9e1e8;  
  --send-message-form:     #F5F5F5;  
}

These variables are reused 17 times across our entire stylesheet. But instead of going through all those places, let’s look at how the --main-color is used as a background colour in both the messages and in the left sidebar_._

Here’s how that plays out in the code:

.rooms-list {  
  background: var(--main-color);}

.message-text {  
  background: var(--main-color);  
}

The beauty of variables is that we now can change the declaration, and then that change will affect the entire app. Let’s for example do:

:root {  
  --main-color: red;  
}

… which results in the following:

What we now can do is simply change all the variable declarations in the :root, and thus change the entire look and feel of our app.

Let’s, for example, find a nice palette online and simply use it in our app:

We’ll replace some of the colours in our :root with the ones from the palette above:

:root {  
  --main-color: #5ea3d0;  
  --secondary-color: white;  
  --main-text-color: #3e5869;  
  --secondary-text-color: #b0c7d6;  
  --new-room-form: #d9e1e8;  
  --send-message-form: #F5F5F5;  
}

This results in a completely different type of chat:

Combining Grid and Variables

If we combine this with changing the layout using CSS Grid, we get two unique chat applications which hardly resemble each other. Let’s do that:

Here’s how our starting point looks like compared to our final example.

:root {  
  --main-color:           #ff66ff;  
  --secondary-color:      #fbd8fb; 
  --main-text-color:      #3e5869;  
  --secondary-text-color: #d8b2ff;  
  --new-room-form:        #ffb2ff;  
  --send-message-form:    #d8b2ff; 
}

.app {  
  display: grid;  
  grid-template-columns: repeat(6, 1fr);  
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m n n"  
    "f f f f f f"; 
}

Pretty cool, huh?

Now I’d recommend you to take my entire course. In it, I’ll guide you through creating this app using React.js and the Chatkit API. I’ll, of course, share the full code with you so that you can experiment with this design for yourself.

Thanks for reading! My name is Per, I’m the co-founder of Scrimba, and I love helping people learn new skills. Follow me on Twitter if you’d like to be notified about new articles and resources.