Formula for website design layout grid

When creating a responsive website design, you will have to calculate a 24-column grid under bootstrap for maximum resolution

Printed 2011-02-20

In 95% of cases, those grids that can be found ready on my website or on the Internet will be enough. But it will be useful to tell how to calculate the grid: for example, the specifics of the site may require large indentation inside the columns and so on. In particular, when creating an adaptive website design , which should also be rubber, you will have to calculate the 24-column grid under bootstrap for maximum resolution (usually 1920px).

As an example, let's take a layout with a width of 1600px and try to make an eight-column grid.

The formula is: Screen width 1600 = 8 * (column width) + 7 * (two indent widths inside the column).

The indentation inside the column is usually 5 ... 10 pixels; our task is to select such an indent value. At which the column width from this formula will be an integer.

For example, substitute here the indent width of 6 pixels; then the column width will be (1600 - 7 * 2 * 6) / 8 = 189.5 pixels. Not suitable. The same thing awaits us in the case of 7 pixels. But with an indent equal to 8 pixels, everything is much better:

Column width = (1600 - 7 * 2 * 8) / 8 = 186 pixels. Here you can calculate grids in such a simple way.