Use of classes on the Materialize grid

Question

While reading the documentation of materialize I saw that to create a grid responsive they use at a given time the following classes:

<div class="col s2 m4 l3"> 

and later to complete the creation of the grid use another:

<div class="col s2 m4 l9">

I wonder if anyone knows why they use values 13 and 19, because I did not find the reason for this value in the documentation.

Answer 1

The canvas is divided into 12 slices. So for my screen to be adaptable we have two arguments to be used, the first is the screen size that can be:

• s - small (small)
• m - average (medium)
• l - great (large)

And combined with this we have the number of slices (horizontally) that your element (in your case a div) will occupy.

The code col s2 m4 l3 indicates that div will occupy two slices of the total of 12 on the small screen, four on an average, and three on a large. Your question is why l3 and then l9, this is not a rule or absolute truth, but for convenience or your total should be 12, so you do not leave "lost" spaces and also do not break the alignment on the later items if you occupied 3 in the first div and 9 in the second we have a total of 12 slices occupied, ie you are making the most of your screen.

In short: try to make the sum of the elements that should appear in the same alignment always add up to 12.