Grid Systems and Frameworks

How (Responsive) Grid Systems work

The use of a grid framework or system is critical when making a responsive website. Without the use of a bullet proof grid system your carefully crafted layout can be all over the place when defining responsive layout changes or changing display widths. If you first would like to understand more about how grids are used in web design you should check out the article 'Grids for bullet proof Responsive Design'.

In the article below we talk about the difference between grid guidelines, a grid system and a framework. We will talk about how CSS based grid systems are constructed and take a look at the underlying HTML and CSS code. Then we take a look at the different approaches these frameworks use like "Does it use pixels or EMs for Media Queries?" and "Is the design workflow mobile first or desktop down?" 

Grid guidelines, systems and frameworks: the difference

Grid guidelines are frequently used in graphics programs like Photoshop, Image Studio and Pixelmator. They help or 'guide' the placement of elements, with the goal of creating order in the way information is presented. Originally used in the print industry the use of grids in web design has been popularized by people such as Khoi Vinh and Mark Boulton. These grid guidelines are often visible in the background and rely on the designer or developer to properly position the different elements. This works fairly well for static designs, but what to do when the design needs to adapt to different display widths and screen resolutions? Manually resizing or repositioning all elements every time the content gets crammed or otherwise does not display correctly is possible but really labor-some and very error-prone.  And that's the main reason the web industry developed and started using CSS based grid systems.

Whereas grid guidelines don't enforce element alignment by default, a grid system will. Look at it this way, instead of specifically positioning an element on the grid using guidelines, you have to specifically take an element off the grid when using a grid system. If you don't take it off the grid, the element will be neatly aligned independent of screen size or resolution. Cool right?

The difference between a framework and system is small. A grid framework is merely an evolution or 'ready for use' grid system'. It contains a pre-coded building blocks and comes documented and well tested.

Getting technical with basic math and code

Depending on the total width of the grid, the number of columns and width of the gutter, the width of a single grid column is calculated. Then classes are specified for content columns that span — ‘take up’ — one or more grid columns. In the case of a fluid grid, these widths are usually specified in percentages. The actual content grid is implemented by assigning CSS classes to the corresponding HTML elements. The rows and content columns are made up of containers, usually simple divs. However, more semantic elements like ‘section’ or ‘aside’ could be used as well. The outer container, the row, get a class of ‘row’ while the elements within the row are assigned a class that specifies how many grid columns they should take up. Let’s look at an example.

In Figure 1 the first row contains three columns. The first column spans two (2) grid columns and contains the logo. The second column spans six (6) grid columns and contains two header elements. The last column spans four (4) grid columns and has the social buttons positioned on the right. The row can be identified by the row class. The columns by the coffee-span class with the number at the end specifying how many grid columns the content columns needs to take up.

Figure: A basic grid implementation.

 

Note that there was not enough room to put the full mark-up — div class=”coffeespan-2” — above the first column in the image above, only the class name has been visualized. The ‘coffee-span-x’ class is unique to the CoffeeGrinder grid framework (see below for details). Each framework uses their own class name although most have the word ‘span’ in it.

As an example Bootstrap 2 — one of the most widely used frameworks — uses simple class names like span1 through span12 to assign widths to content columns. Foundation, another popular grid framework, uses class names that refer to an intended display width followed by the column span. Classes like ‘small-6’ or ‘large-4’ refer to the intended display device —’small-6’ means that on a small screen like a mobile phone the content column needs to span six (6) grid columns.

Please note that the actual viewport width that determines if the ‘small’ class is being applied — the width at which the Media Query fires — is an arbitrary number determined by the framework. Using a fixed number of predefined arbitrary breakpoints that target certain device types implies that the exact width at which the span can be used might not work well with your custom layout or specific content needs.

Layout Maker addresses this issue by making it easy to create custom breakpoints — column spans and other styles can then be updated when needed. These custom breakpoints can be created for all embedded grid frameworks, including Bootstrap 2. This allows you to make designs that are optimally usable and readable independent of the device type or size.

Let’s get back to the example of Figure 1 and see this how this works in practice. The actual HTML structure for the design is shown below.

Figure: Example markup.

The design (for now) uses three rows. As discussed above, the first row contains three columns that can be identified by the ‘coffee-span-x’ class. The logo element is placed in the first columns, the header elements in the second column and the social media icons in the third (note: I am using placeholder text instead of the actual markup for clarity).

The second row only contains one column, which spans the entire width of the grid and contains a horizontal rule. The third row again has three columns that contain the image (1st column), heading, paragraph and text link (2nd column) and advertisement with button (3rd column).

The role of the rows in a grid based design is clear, they provide the vertical separation. All rows are using the CSS display property ‘block’ by default, therefore taking up the full width and vertically stacking upon each other.

Depending on the grid configuration, e.g. 12, 16 or 24 columns, a relative width is calculated for a single grid column. Since the widths are specified in percentages the initial calculation is simple: the number of columns divided by 100. This means that in a 12 column grid a single column will take up 8.33% of the available width. It does not mean that the content placed inside of a column can take up that amount of space though. The exact amount of space available for the content depends on the width of the gutter. How this is exactly implemented varies from grid framework to grid framework and can become rather complex. We will get a taste of how this works in the next section, first let’s take a peek at the grid CSS for the above example.

Figure: Grid CSS.

The CSS in the image shows us that each row will be maximum 75em (1200px) wide and that each element that uses a ‘coffee-span’ class gets left and right padding of 0.5em (8px). This means that the gutter, the visual separation between each column, equals the left plus right padding: 1em.

In this 12 column grid a span class is generated for the spanning of each combination of grid columns — from 1 to 12. Note that in the above image only span-1 to span-6 are visible.

The width of a span-1 is the exact same as the width of a grid column: 8.33%. A span-6 takes up half (6/12 = 50%) of the width. When content, an image, paragraph or any other HTML element, is placed inside of a column it is by default allowed to take up the full column width minus the left and right padding.