How does grid system work?

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 ( divs ) 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):

[bloco-pai]
     |
     |----[linha]
     |       |
     |       |----[coluna]

This structure above can be described in HTML as:

<div class="bloco-pai">
    <div class="linha">
        <div class="coluna"></div>
    </div>
</div>

Each 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 -->
    </tr>
</table>

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:

Theseclasseswhenaddedtoacolumndefineaspecificsizeforit,whichwouldbeequivalenttocolspanintables.

Solet'stakeanotherexample,thistimeusingBootstrap:

<divclass="container">
    <div class="row">
        <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 -->
    </div>
</div>

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 .

Bonus:

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 .

    

Although I consider the documentation quite complete, let's go.

Official Bootstrap Grid System

The bootstrap works by dividing the screen into 12 columns. Regardless of which device you are using, it uses 12 columns.

The devices it supports are 4:

Very wide screen (Screens larger than or equal to 1200px): col-lg -

Wide screen (Screens larger than or equal to 992px): col-md -

Small screen (Screens larger than or equal to 768px): col-sm -

Extremely small (usually cellular) screen (Screens up to 767px): col-xs -

So if you want to build an area on your screen that uses 9 columns for the content on your left, and 3 for the right menu. You should define this within a .container and inside a .row see example for wide screens:

<div class="container">
     <div class="row">
          <div class="col-md-9">Conteúdo</div>
          <div class="col-md-3">Menu</div>
      </div>
</div>

From there, you need to study, following this concept and seeing the link that I posted, where you will begin to understand better.

There are several videos on youtube also teaching you how to use Bootstrap: Building with Bootstrap (English)

This is just one of them ... Remember that most of the material will be in English since in pt-br only has estimated 10% of all technological knowledge translated. But stay there, anything, just get in touch.

    

The grid system works with classes that include a width for their elements. Being 1 through 12. So 12 is the maximum width of your page.

Logo <div class="col-md-12"></div> # Represents a div that will have the maximum width of your page. <div class="col-md-6"></div> # Represents half of your page.

So if the maximum width is 12 and you want 2 divs in 1 line, then:

<div class="row">
<div class="col-md-6"></div><div class="col-md-6"></div> # 6 + 6 = 12
</div>

Understanding the class: col - Columns md, xs, sm - Devices that will have the measure 1 to 12 - Width size

So I can use:

<div class="col-md-6 col-xs-12"></div><div class="col-md-6 col-xs-12"></div> # 6 + 6 = 12

This means that on desktop screens I will have 2 columns of 6 and in extra small I will have 2 columns with 12, they will appear 1 per line in the case of xs.

I hope I have not been vague, but the documentation is more explanatory. Just study a little more:)

    

By default, Bootstrap creates a grid with columns whose size is 100% of the parent container. For example, if you want to place a grid in a space of 960 pixels (a <div> , for example), Bootstrap will generate a grid that occupies this space harmoniously.

What I think may cause some confusion is the numbering ( .col-md-3 , col-md-4 ). This is because of the 960 grids system , which is an Internet standard in which the average size of the displays gives more or less 960 pixels. The idea is to split your grid into a maximum of 12 columns, and each number represents the space in the number of columns that it occupies.

In the first example we have a grid of one row and three columns, with class col-md-4 . That is, they are 3 columns of size 4, that is, that occupy the space of 4 minimum columns.

The other examples are analogous.