What are CSS Grids:
CSS Grids are nothing more than the "simulation" of a tabular structure by means of
divs . If you started messing with the Internet in the time of IE6 and related, you should remember that tables were often used to structure HTML layouts. This was due to the fact that it was easier to work with layout in grid format on the web, and the table had a behavior similar to a grid (a table of 10 lines x 10 columns would simulate a 10x10 grid).
The problem is that tables have certain peculiarities, such as the fact that they do not get along very well with responsive layouts (after all, tables have been thought to behave as "cast" structures from the beginning), and semantically speaking, they do not are recommended for use in building the layout of a page (how do you think a reader for the blind will understand a page that is all done inside a myriad of tables, which are being misused to assemble layouts instead of displaying tabular data? ).
Put these factors together with the fact that layouts are becoming more and more complex with a growing number of devices of all sizes with internet access, and it is clear that layouts using tables have never been and would never be the best solution available.
It was then that the developers realized that if they could replicate the grid functionality of a table, with the mobility and responsiveness of the block elements (
) this would greatly facilitate the assembly process of layouts, being the perfect solution to finally replace the tables. This is how the concept of CSS grids was born.
Some of the advantages of using CSS grids are:
- Semantically correct (layout elements being used for layout);
- Allows easy styling and malleability;
- Enables the total restructuring of the grid blocks according to the size of the device (try resizing your browser
accessing the Bootstrap site);
How to use CSS grids:
As you said in your question, practically all CSS frameworks come with a grids system with them, and although the class names change, the structure is usually the same (and will even remind you of the structure of a table):
This structure above can be described in HTML as:
bloco-pai can have
n rows, and each
linha can have
n columns (theoretically, although most frameworks accept a total of a maximum of 12 or 24 columns)
As you can see, the structure of a CSS grid is very similar to the structure of a
table , I'll show you an example:
<table> <!-- equivalente ao bloco-pai -->
<tr> <!-- equivalente a linha -->
<td></td> <!-- equivalente a coluna -->
Once you understand that the structure of a CSS grid is nothing more than the structure equivalent of a
table , it is much easier to understand what you are doing in the code.
Well, what if I want to work with CSS grids, but using columns of different sizes?
That's where Bootstrap's strange names come in:
<div class="col-md-8"></div> <!-- Esta coluna terá um tamanho de 8/12 -->
<div class="col-md-4"></div> <!-- Esta coluna terá um tamanho de 4/12 -->
As you can see, the basic structure above will generate a grid with one row and two columns, one size 8/12 (66.66%) and another size 4/12 (33.33%). >
Remembering that column sizes are usually never set to
px (pixels), but rather to
% (percentage), so they always assume a percentage of the parent element size above them.
This means that if you created a parent element with a width of
1000px and added two columns with
6/12 size (that is, 50%) within it, those columns would assume
500px width each. If the parent element size were modified to
500px , both columns would now have
250px , and so on.
Well, CSS grids have a lot more advantages and extra details that if they were to be written here they would end up generating a bigger response than this one already, so I leave the rest as a homework for you to read there in Bootstrap documentation .
For those who do not know, there is a CSS grids pattern being specified by W3C, and -pasmen , IE10 + has already implemented the functionality. Well worth a look .