Modular grids

Perhaps anyone who’s ever been involved in web design is familiar with a concept of a modular grid. Modular grids originated within Swiss typography and the idea behind them is quite simple: all content elements (modules) are aligned not just by the eye estimate, but along the invisible straight lines — grids. The module itself is always a rectangle, and its borders are either visible (indicated by a background coloring, an image, a frame), or just assumed.

The grid structure varies significantly. Print and online media design their own grids, which are reused from issue to issue, from page to page, becoming a part of the unique visual identity. A 12-column grid is a popular choice for the web — mainly due to its implementation in Bootstrap.

Designers got to keep in mind that grid is not a magical web design tool, but merely a way to arrange all the elements neatly. Just like a ruler for an architect, it simply helps to draw an even line, but won’t be a source of architectural solutions. On the other hand, the page made up on a grid layout looks much more professional by default.

Well-known layout designer, Igor Shtang likes to repeat the following mantra: ‘first goes a structure, then — a grid”. That is, the design is always more than just evenly aligned blocks. It’s important to define content, order, emphasis, proportions, relative sizes and placement first, and only when all these design goals are met, you can add the grid guides and adjust the modules to make your layout more balanced. Wherein, you should not distort the modules in the name of the grid: the content and the idea are more important. If the alignment leads to something looking unappealing, it is better to sacrifice the grid for the content.

Web grids

Web pages have a feature: the size of the layout is not known in advance and the page has to adapt to different screen sizes. The grid layout, however, can stay in place by stretching to match the screen size (such pages are called ‘elastic’ or responsive). Alternatively, you can design several grids that will replace one another depending on the device’s screen size (such pages are called adaptive). Approaches are not mutually exclusive and most of the pages in the modern web are both responsive and adaptive at the same time.

Adaptivity usually means a step-by-step reduction of content columns number, or just ‘unfolding’: what used to be a column on desktop turns into the blocks arranged one by one vertically.

There are other, more complex ways to adapt a web page for smaller screens, for instance, by replacing one grid by another. However, such a solution forces you to implement every possible case within your code.

Another important feature of web pages: not only the size of the layout is not known in advance, but also the content (something that would make print designer’s head explode). Text and images might be generated by users or content managers, and no one can tell beforehand what they would be like. Thus, the grid has to ‘hold the blow’ — to accommodate images of different proportions and text of arbitrary size, making the page visually appealing and keeping the modules from crawling over one another. This task is the responsibility of the designer, not that of the frontend developer. It is important to design such a module structure that can properly arrange the content, while its implementation in the code won’t be very complex.

CSS grids

There are many ways to implement a modular grid using CSS. Some of the approaches only allow to split a row into columns (95% of the designs don’t require more than that), others — to create an advanced grid with a complex arrangement of modules. These approaches are not mutually exclusive, they can be used in different parts of the website or even in the same layout together — you just need to set the rules in a way that they do not intersect and do not override each other.

Column grid is a set of presentational CSS-classes (un-semantic), used wherever you need to split the layout into adaptive columns. Of course, presentational classes are totally wrong, un-semantic, and just ‘eww’, but when it comes to columns they are a ‘necessary evil’. Without them, you’d have to write CSS code for each element, and what is more — not even a single rule, but a rule for every screen size. This would slow down the whole process, result in a greater amount of code, and therefore — a greater number of potential mistakes.

In our team, we name column classes by setting their width in percentages — unlike Bootstrap, where it is a number of one twelfths. It creates much more flexible and transparent system. All grid rules have the same weight, so all the column properties (e.g. the inter-column distance) can be easily redefined.

All the examples below are written in SCSS.

Let’s use the following markup (almost like Bootstrap’s):

Columns using inline-block

It’s worth paying attention to the font-size: 0 property. This is a kind of hack for removing spaces between the columns. If you do not do this, two columns with a width of 50% will not fit the row: there will be a gap between them. This is not some browser bug, but a completely correct behavior: any whitespace characters in the markup between inline items are displayed as spaces on the page.

Pros: Inline-blocks can be aligned vertically in different ways. The width may vary depending on the content if you set width: auto and experiment with min-width and max-width. Cons: The order of the blocks cannot be changed.

Columns using float

Pros: Easy to implement. Using the col-right class, you can slightly vary the order of the columns in your code and on the page (which might be needed sometimes). Cons: The columns are aligned along the top edge only, and the height always depends on the content.

Flexbox

Flexbox is a much more up-to-date solution that has many advantages. When used as a column system, flexbox columns will automatically stretch to the same height (the height of the longest column). Sometimes design layouts presume the same height for all the modules, especially if their boundaries are visible.

Moreover, the flex-direction property allows to run flex items not only in columns, but also in rows, creating actual modular grids, and not just a sequence of columns in a line. Flex-grow stretches the column so it adjusts to fit the space not occupied by other columns, while flex-order allows you to rearrange the items appearance as you like. So, to sum it up, with flexbox you can create a grid and modify it for different screens as you see fit.

Cons: If there are too many elements, the flexbox noticeably slows down the page rendering. The abundance of properties makes it more difficult to predict the layout’s behavior in relation to different content. Since flexbox is not implemented everywhere equally, some browsers may surprise you.

Tips: Use flexbox when you need a really complex grid with non-standard adaptivity, not just a row of a few columns. Simple tasks call for simple solutions.

Grid layout

Grid layout is a CSS implementation of modular grids, invented for grids and those frontenders who think in grids. There is nothing better for sophisticated grid development than grid layout.

Pros: A complete grid layout system, well-understood, concise and by design. Grid-properties can be applied to semantic elements without using wrappers, which means less code. In the near future, the grid layout will replace the other approaches, so it is at least worth giving a try.

Cons: Grid layout is not all-purpose, it is hard to come up with reusable classes using display:grid (and frankly — there’s no need to); some module properties are calculated only after rendering (like with flexbox), which leads to performance issues; grid layout support was added only about a year ago (which is just recently for the web standards), so you still have to use fallbacks — to create the grid with another approach first, and then code it up to grid layout.

Tips: Use grid when your designer has just read something about the grids and designed a very ‘griddy’ layout. Or if you really want to show that you are already one foot into the future.

There are other, more exotic, column systems (hey, susy!), and if you do not want to be like everyone else, you can reinvent yourself a wheel, which spins better for you personally.

Let’s show an example of how simple alignment can transform a page. We did not specifically change the design, colors or overall page layout, only aligned all the elements:

Go with a grid!