Formula for website design layout grid

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
alt
Michael CEO&Founder


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

Our services

Latest works:

«Our niche is rather compact, and with the help and guidance of Illumina Creative we managed to overtake all the competitors. Website optimization is perfect, as well as the traffic growth »
Alex (AppCafe, CEO).
«The picture came to life. Hills like, throw us away from city competitions. A good cut of land. In the center, the flower bed must still be removed and a fountain set up. Also add urban paraphernalia: lanterns with taut flags, benches - what they talked about yesterday »
Elena Proidisvet (Project Manager "1000 days before the 2014 Olympics").