Designing With Grid; From Graphic to Web

Translating the Graphic Design Grid to CSS Grid

In this article, I’m going to show you how to take a design from your Graphic Illustrator app and translate it into a web page using CSS Grid.

Estimated reading time: 7 minutes

This article has references to learn CSS Grid, but is not intended teach you all about CSS Grid.This article has references to the Graphic Design Grid, but is not intended teach you all about the Graphic Design grid.

In a previous article, I discussed the basics of the classic Grid Principles in Graphic Design and how to use those principles to design your web page. In that article, I used Flex-Box to align content to “flow-lines”.

Since then, I have discovered an even more powerful web design tool, which you have probably heard of (or else why are you here?) called CSS Grid. For those of you who are unfamiliar with CSS Grid, it is awesome, plain and simple. Granted it seems a little complicated to get started, but once you learn it you will never look back.

If you are looking for good reference material I highly recommend the following; The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment, By Rachel Andrew & CSS Tricks A Complete Guide to CSS Grid.

Starting with the Graphic Grid

Let’s begin first with our Graphic Editor, I use Affinity Designer, many use Sketch or Adobe Illustrator, it really doesn’t matter. The goal is to create a grid, so start by creating an Art-board.

Make a graph in your illustration app

I started by creating a Template Art-board with a default website pixel ratio (if you don’t have any default templates in your app, just create an art-board that is 1300px wide by 1000px tall, it can really be anything as long as it mimics a desktop screen). Then I made a line and just copy pasted across the art board following the default grid lines as my guide. I did this horizontally and vertically. I ended up with 16 columns and 10 rows.

Add the text boxes and images (your content) to your grid

Then, I just started building a design. I wanted to do something “print-like” as that seems to be the rage these days. It’s also an excellent type of design to show you how easy it is to translate a print style design into a web page using CSS Grid. Below is what I designed with my Graphic Editor.

I’m going to summarize the Graphic Design Grid here in a short list and if you look at my image you can see it follows these guidelines. If you want to learn more about the Graphic Design Grid, here is a neat article.

• Keep your content (text boxes, images, headings) inside your column and row lines
• Align your elements for the eye to follow, so text-block-on and text-block four begin on the same row line (flow-line)

And now…we translate to Web Design Grid

So after I created my design using the Graphic Design principles of Designing in a Grid; such as:

• my content fits within flow-lines and columns
• I aligned my content to columns and rows
• I aligned elements using flow-lines.

Time to build the virtual grid with CSS Grid.

Below is the codepen where I built out the design (for best result, check it out in 0.25x):

The major things to note, are that I really relied on the “initial” or default grid values for most of my work here. I did not use any box alignment properties in this design (such as; justify-items, or align-items), in fact I really didn’t do that much. For more on this check out the biggest CSS mistakes to avoid here.

I started by setting the html tag to box-sizing:border-box; so that the initial values for box-alignment would work as I expected.

Then, I created my virtual grid, just like I did in my Editor (Illustrator App). I already knew how many columns I needed and how large my rows should be.

The Container element

My body tag has the class="container". That’s because you have to set a container to display: grid; the container element which uses the display value of grid is your virtual column grid, and the child elements of the container are position-able within that grid.

It’s a lot easier than it sounds, check it out.

.container {
  width:100%;
  display:grid;
  grid-template-columns: repeat(16, 1fr [col-start]);
  grid-template-rows: repeat(10, 100px [row-start]);
  background:#fff;
}

Above are my container values, notice how I set my grid-template-columns property to repeat 16 times (number sound familiar?) 16 columns with a 1fr size property, that means 1 fraction of the total container size.

So my columns will size automatically and I don’t have to use absolute values.

The Images

.img-one {
  grid-column:1/ span 4;
  grid-row: 2/ span 6;
}
.img-two {
  grid-column: 6/ span 4;
    grid-row: 2/ span 6;
}
.img-three {
  grid-column: 10/span 7;
  grid-row: 7/ span 6;
  background: #000;
}

Now the styles above are the child elements of my container, and all I had to do to arrange them, was count the lines on my Graphic Editor (Illustrator App) to match my “Virtual Grid” that I turned my container into.

So .img-one begins on the column line 1 (the edge of our window) and it spans 4 columns, it also starts on row 2 and spans 6 rows.

If you are checking this out on codepen, check out how img-one is not first in the source order (yeah you can do whatever you want source order be damned). You will probably want to think about it though since you want your design to be accessible, but it’s still pretty cool.

Just to reiterate, img-two starts on column line 6 and also spans 4 columns, the row starts at 2 and spans 6 rows. Finally img-three begins on column line 10 and spans 7 columns, it also begins on row 7 and spans 6 rows.

Text Blocks

We follow this pattern of mimicking our grid from our preferred illustrator app into our “virtual grid” we created with our container element, by placing our text-blocks. Running into issues? Check out how to fix CSS issues with Dev Tools here.

.text-block-one {
  grid-column:2/ span 2;
  grid-row: 8/ span 4;
  color:#fff;
  z-index:2;
}
.text-block-two {
  grid-column:5/ span 2;
  grid-row: 9/ span 4;
  color:#fff;
  z-index:2;
}
.text-block-four {
  grid-column:8/ span 2;
  grid-row: 8/ span 4;
  color:#fff;
  z-index:2;
}
.text-block-three {
    grid-column:11/ span 2;
  grid-row: 3/ span 4;
}
.text-block-five {
      grid-column:14/ span 2;
    grid-row: 1/ span 4;
}
footer {
  grid-column:1/ span 9;
  grid-row: 7/ span 7;
  background:#000;
}

Notice the text blocks placed over the black footer element have a z-index property added to them. In my opinion, layering with z-index is simplified when your design the starts with CSS Grid as it’s layout standard.

Conclusion

The beauty of CSS Grid is that it really simplifies layouts and layering. Huge bonus? It also translates well from design to development.

We end up with a pretty slick design that looks pretty much exactly like our illustration does.

Maybe we could use background images to control the height and width a little better, maybe we can mess around with how these are affected by media queries, but all in all, we did this in a very short amount of time and our result is much closer to our plan than if we were using flexbox, or float layouts. Speaking of flexbox, I learned 3 things using CSS Grid and Flexbox together, check it out here.

Interested in more advanced topics? Check out how to build accessible front end components with React.js, like a to-do list and toggle buttons.