Build a Content-out Grid System with Gridset

Posted on by Nathan

Last week I wrote an article for A List Apart on how to use ratios, scales and fluid grids to derive a layout from your content. While the underlying theory and mathematics are explained in depth in the article, I wanted to show how Gridset makes all of this much easier.

In this tutorial I’ll show you how to quickly construct a ratio-based blog layout, as seen in the article, using Gridset.

Generating a scale

We can easily generate a scale based on any ratio in Gridset. For our blog example, we’re using the golden ratio. Eight sizes should give us enough variation to create an interesting composition.

Creating our scale

  1. Create a grid
  2. Generate eight columns
  3. Change the ratio to “Golden” (1.618)

This scale is just for reference as we build the rest of our layout. It can be removed for production.

Content grids to define proportions

First, get familiar with your content and identify simple patterns, like images paired with headlines. We can build simple, fluid grids for these patterns to allow them to keep their proportions while fitting into any section of your global layout.

Blurb grid

In my blog, I know posts will have featured images, and I will likely use teasers – or what I call “blurbs” – throughout to lead readers to other posts. My headlines tend to be long, so I’ll want to make the headline area larger than the image in these blurbs. In my scale, I can see the sixth and the eighth steps are a suitable proportion.

Creating a content grid for our “blurbs”

  1. Create a new grid
  2. Name this grid “Blurb”
  3. Since this content will be used throughout the layout at any viewport size, set the grid’s min and max-width to “none”
  4. Set the gutter to 0
  5. Generate three columns
  6. Set the ratio to “Golden”
  7. Delete column two

Let’s try fitting our content into this grid.

Applying our grid to our blurb content

From here, we can make adjustments. We may even set a max-width on the text column to make sure its measure doesn’t get too wide. Visually, 44em seems wide enough for our text.

Setting a column’s max-width to ems

  1. Select the column
  2. Change the constraint to “max-width”
  3. Set the value to 44em

View the blurbs demo

Article grid

Our main article area will need a bit of structure, so we can create another content grid for articles. I’ll want enough room for a readable measure, a thinner section for social media links, and columns to allow for interesting arrangements of pictures and quotes.

Creating an article grid

  1. Create a new grid
  2. Name this grid “Article”
  3. Create three columns
  4. Change the ratio to “Golden”

Our article structure will need to be adapted for different viewports, but we’ll take a closer look at that in a moment.

Layout grids to divide the viewport

For mid-sized viewports (think laptops or tablets in landscape), we will want a space for navigation on the left, a larger area for posts in the middle, and an area for related content on the right. We will use a size difference of two steps on our scale (as we did with our blurb grid), but to keep our content area centered in the viewport we’ll make the left and right columns the same size to create symmetry.

Creating the layout grid for mid-sized viewports

  1. Create a new grid
  2. Name this grid “Layout”
  3. Set the grid’s min-width to 1024px (for now) to target large viewports
  4. Create three columns using the golden ratio
  5. Delete the middle column
  6. Duplicate the smaller column and drag it to the far right

Pulling all of our grids together, we can see how our content is behaving.

Testing our new blog layout

Adjusting to viewport constraints

Our current layout grid works well for large viewports, but when resizing the browser we can see the article area begins to stretch to an uncomfortable measure when the viewport is 1800px or wider.

To fix this, we don’t need to adjust the whole grid system. We just create a new content grid for our article that applies at viewports larger than 1800px.

For this extra large article grid, we want margins on the right and left to keep the text in shape, and we can pull the social links out to the left, with a small margin in between. We can create a “dead” column – a column not used for content – to define these spaces.

Creating a new article grid for larger viewports

  1. Set our current article grid’s max-width to 1799px (just below our 1800px target)
  2. Create a new grid
  3. Name the duplicate “Article large”
  4. Change the prefix to “al”
  5. Set the new grid’s min-width to 1800px to target larger viewports
  6. Create seven columns using the golden ratio
  7. Delete the second column (to create our smaller “dead” column)
  8. Move the smallest column to the third position

When resizing the browser window below 1024px wide, we can see that the content on the right is collapsing. We can adjust our layout grid for mid-sized screens (think tablet in portrait) by dropping the sidebar below the main content.

Creating a new layout grid for mid-sized viewports

This grid will actually have the same proportions as our blurb grid, so we just need to:

  1. Duplicate the blurb grid
  2. Name the duplicate “Layout mid”
  3. Change the prefix to “lm”
  4. Set the max-width to 1023px (just below our target)

When the viewport is sized below 600px, the content again starts to feel too tight, so we set a min-width of 600px on “Layout mid”, removing any structure and allowing the content to flow full width.

Viewing the last tweaks to our grid system for small screens

View the completed demo layout

All that is gold…

This is an example of building with one ratio for one type of content. With this method, powered by Gridset, there’s a universe of layout possibilities to explore - guided, of course, by the requirements of your content.

So give it a try, and please share your results. We’re excited to see what you come up with!