01Hard or soft vertical grid

There are two ways to simplify work with vertical spacing: a hard grid and a soft grid. A hard grid means that the height and spacing of the elements are always multiples of a grid unit. A soft grid does not limit the height of the elements in any way, but only defines multiples of the spacing between them.

In the design of sites and web applications soft grid is preferred. It gives more freedom in making design decisions and does not impose such restrictions as a hard grid.

The hard grid limits the design and if the height of the elements is not a multiple of the grid unit, that's a problem.
A soft grid gives you more freedom when designing web sites and web apps.

02Types of grids

There are several types of grids: column, modular, hierarchical and others. Each type of grid can solve a particular problem. It all depends on the content and design requirements.

Each type of grid can be used for different tasks.

It is quite normal to combine different types of grids in one layout if the task requires it.

Combining different types of grid.

03No need to fit the sidebar into the page grid

There is no need to fit the sidebar into the page grid. The sidebar may well be separate from the overall grid, or it may have its own grid.

Often the sidebar has a fixed pixel width, and the content area stretches according to the width of the page. In that case, it's difficult to fit the sidebar into the grid. And there is no point to do that.

The sidebar is fit into the page grid.
The sidebar has nothing to do with the page grid.

There is no need to fit the header into a single page grid. First, the header is usually a line, not a column module, and the default line does not require a grid. Second, it's quite difficult because the header can have a wide variety of elements, menus, and logos that you can't fit into a single column.

So unless the content requires a direct relationship between the page columns and the header, there's no point in fitting it into the overall page grid. You can do without the grid in the header or make your own grid for it. The same goes for footer.

The header and footer are fit into the page grid.
The header as well as the footer usually doesn't need to fit into the page grid.

05If the content fits into a three-column grid, you don't need to use a 12-column grid

There is no point in using a 12-column grid if 3 columns or any other number of columns is right for the content.

A 12-column grid makes no sense.
The number of columns is defined by the content.

06If the content requires the use of different grids, you can use different grids

It's perfectly normal to combine several grids in one layout, in one page, in one application. If the content requires different approaches, that's fine and allows you to build the most effective layout possible.

You shouldn't always fit content into the one grid. It's not the grid that dictates the terms, it's the content.

The contents do not fit into one grid.
It's okay to combine grids depending on the contents

07There is no need to use a grid if the content does not require it

The grid is just a tool for organizing content. It's one way to build interfaces more efficiently, especially multi-page UI. The grid gives format and structure to speed up and simplify content.

If the content doesn't need to be grid-based, you shouldn't artificially create limits that don't make sense.

The contents do not require a grid.
It's good to make a grid if the contents require it.