While reading the documentation for materialize I saw that to create a grid responsive they use the following classes at a given moment:
<div class="col s2 m4 l3">
and later to complete the creation of the grid use another:
<div class="col s2 m4 l9">
I'd like to know if anyone knows why they use values 13 and 19 because I did not find the reason for this value in the documentation.
The screen is divided into 12 slices. So for my screen to be adaptable we have two arguments to use, the first is the screen size that can be:
And combined with this we have the number of slices (horizontally) that your element (in your case a div) will occupy.
The col s2 m4 l3 code indicates that the div will occupy two slices of the total of 12 on the small screen, four on an average, and three on a large screen. Your question is why l3 and then l9 , this is not an absolute rule or truth, but for convenience or your total must be 12, so you do not leave "lost" spaces and also do not break the alignment on the items later, if you occupied 3 in the first div and 9 in the second we have a total of 12 occupied slices, that is you are taking full advantage 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.