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.
More about grids in design:
Why do we need grid < br> Going beyond the borders of the columns
Density rule
Grid and mood
Responsive Grid for Bootstrap
Formula for the grid
Method: if the grid fails