I will explain using bootstrap as a reference because it is the framework I know best.
It divides any space within an element into 12 columns no matter the total size of the element, i.e.:
<body> // eu tenho 12 colunas dentro do body
<div> // eu tenho 12 colunas dentro da primeira div
<div> // eu tenho 12 colunas dentro da segunda div
</div>
</div>
</body>
The question of responsiveness comes when we mark how many columns an element is wide for a given screen size.
- We have the column marking
col-lg from 1 to 12 for large screens
- We have the column marking
col-md from 1 to 12 for medium screens
- We have the column marking
col-sm from 1 to 12 for small screens
- We have the column marking
col-xs from 1 to 12 for mobile screens
Example:
<div id="pai">
<div id="div1" class="col-lg-10 col-md-8 col-sm-6 col-xs-12"></div>
<div id="div2" class="col-lg-2 col-md-4 col-sm-6 col-xs-12"></div>
</div>
- On a large screen, the
filho1 will occupy 10 columns of pai as long as the filho2 will occupy 2 columns of pai.
- On a medium screen, the
filho1 will occupy 8 columns of pai as long as the filho2 will occupy 4 columns of pai.
- On a small screen, the
filho1 will occupy 6 columns of pai as long as the filho2 will occupy 6 columns of pai.
- On a mobile screen, the
filho1 will occupy 12 columns of pai as long as the filho2 will occupy 12 columns of pai.
And how does he know which column he should apply to the screen size?
It’s thanks to a resource called Media query that you can apply certain css to a screen size that you want.
Example, taken from bootstrap 3 source code without changing anything:
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
...
}
Until the screen on which the website opens is not at least the size of 768px, which is the size that the bootstrap considers for small screens, classes col-sm- do not respond to not overwrite the styles of the mobile screen classes, the col-xs-. Because as the larger the screen, the classes corresponding to larger sizes will overwrite the smaller size classes.
Ta, beauty. This does not answer your question whether the Framework will do the work of thinking on multiple screens or not.
The answer is no. You still need to think about your multi-screen layout, the framework will make it easy to move between them without having to redirect your user to multiple layouts and especially without having to maintain multiple layout files.
It allows you to adapt the layout to multiple screens without having to reassemble/reorder elements. Only by using the classes can you swap position/column elements as you move from one screen to another, you can determine that the X element will not appear on mobile screens while the Y element will appear only on mobile.
All this using only the classes of grid system and utility classes
Remembering that there are cases that using a css framework with grid system will not satisfy your needs altogether, so do not feel obligated to use one only because the market uses.
I hope I’ve been able to shed some light on the advantage of using a grid system.
If you have already analyzed any screen that uses boostrap, you will see that within the classes in HTML tags there are several names like
col-sm-12. This represents the size of the grid, it adapts with the size of the screens and devices due to the CSS and JS libraries that comes along with Bootstrap. Here you will get more information about Bootstrap.– EmanuelF
The answer http://answall.com/a/8920/3635 seems to respond well to the problem, explains that by resizing the grids already self-update as you previously set them and explain how to use them. If there’s something missing please comment.
– Guilherme Nascimento