Breaking the Grid.

I remember my roommate coming home from class one day our freshman year of art school telling me about her first assignment, “breaking the grid”. I remember thinking the assignment sounded like something straight out of Art School Confidential. Never the less the sentence itself peaked my interest in what my roommate was working on. She taught me about the grid, it’s historical context in graphic design, the rule of thirds, how Helvetica was the ‘most groundbreaking font ever created’, but mostly that there was some rhyme and reason to all of these aesthetic theories.

Massimo Vignelli’s NYC Subway Map 1972

I became particularly fond of the work that she exposed me too from Massimo Vignelli, an Italian designer who is well known for the 1972 New York City subway map. His work was clean, modernist, yet did not cross the line of practicality which was so important for some of his commercial clients.

Graphic Design for a web developer is usually pretty low on the priority list when there are so many other components at play. Wouldn’t it be nice though if we could all live in world where every website was beautiful. Wouldn’t the world just be a happier and prettier place?

The main tool we have to work with as web developers is something called CSS. CSS was originally thought up by Håkon Wium Lie in 1994. A lot of other style sheet languages were proposed at that time however through the years CSS has remained the de facto language for most web browsers. The thing about CSS though is that it’s written by developers for developers, not necessarily for artists. I‘ve been using CSS for over ten years and I still have to look up how to get do some pretty basic graphic design things like making things align properly. So how would I, for example, take something as intricately designed as Massimo’s subway map and apply grid based design concepts to a website that also needs to be interactive, scalable and readable.

Thankfully about three years ago Internet Explorer came out with a CSS property called Grid which seams to be a truly design oriented approach to the language. It allows the developer to set a container element to display: grid; and then break the container into rows and columns which its child elements will fall into. I’ve created a Codepen demo which I’ll use to demonstrate some of the basics of setting up with the CSS grid property.

First I’ll explain the .wrapper class.

display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(200px, auto);
grid-gap: 1em;
/*transform: rotate(10deg);*/

This wrapper is a container for all of the divs inside of it. Setting the wrapper to display grid allows us to set not only column properties but also row properties. grid-template-columns: repeat(6, 1fr); is telling our grid that we want to have want to have 6 columns at an equal spacing apart from one another. First argument in repeat the the amount of times to repeat, and the second is the amount what we would like to repeat. For these columns I’ve seen that it’s best practice to use fr (fractions) here instead of percents so that there is no issues with margin and padding. Similarly here we could have tried repeat(3, 2fr 1fr) meaning we would have three columns each split into two columns with the first twice as wide as the second. This is also the same as just saying 2fr 1fr 2fr 1fr 2fr 1fr but who wants to type all that out.

Next is the grid-auto-rows property. Here I’ve set each row with minmax, where the first argument is the minimum height of each row and the second argument is the maximum height of height of each row. I have set the max height to auto so that it will stretch to fit anything that is inside of it.

Grid-gap specifies the gap between all of the grid elements. (I left the transform property in here commented out to show that the whole grid can be rotated also, try it out if you’re feeling adventurous).

.wrapper > div {
display: grid;

/*centers content horizontally*/
justify-content: center;
/*centers content vertically*/
align-items: center;

color: white;

Here I have a CSS selector for each child div of the wrapper class. I have set each of these divs to display grid so that we can use the justify-content and align-items properties. I set these both to center to show just how simple grid makes centering content when it’s wrapper is set to display: grid.

#box_6 {
border-radius: 0px 0px 0px 300px

I’m gonna skip ahead to Box 6. It may look a little funny that there is a fraction as the grid-column argument, however this isn’t actually a fraction. This is actually the most powerful aspect of grid and it allows you to put the box on the page wherever you want. Imagine that your grid is just a bunch of lines on the screen. Our grid has six columns which means that it will have seven lines on it. The first number of the grid-column property is the starting line the second number is the ending line. You are telling this box that you want it to stretch from line one all the way to line three, which is like saying ‘take up all the space in column one and column two’. The same is happening for the grid-row property. This is saying start at line two and stretch to line four, or ‘take up all the space in rows two and three. (If you aren’t familiar with border-radius, this property is taking four arguments starting from the top left and going clockwise. On the bottom left corner of this div I have set a border radius of 300px, just for fun.)

As for the rest of the boxes I basically just played around with randomizing the grid as much as possible to just push the limits to see when it would break and surprisingly I didn’t find any issues with reassigning the blocks another block’s space. If a block’s space was taken up it would just move right to the next available space and shift all of the divs to the right one space. If you take a look at the Javascript you’ll see that the box number is given to the boxes in order of initialization with a counter that is set at the top.

I hope this little tutorial can help you start writing some of your own CSS without having to always rely on a CSS library. As a designer I try not to rely on anything like bootstrap to style my work. There’s always something about the way that these libraries style things that I find to be a bit off and from there one has to play a game of overriding bootstrap’s CSS in order to get things to look the way you want. Not to mention, the more everyone uses something like bootstrap the more everything on the web starts to look exactly the same, and that’s no fun for anyone! As of Spring 2017 Grid is now supported in most browsers, and is safe to use in production.

Happy Styling!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.