Improve documentation on grid system

[sbrauch]

I want to propose an evolution/improvement on

Documentation

Description

I've just recently implemented the grid system into our project and I had a bit of trouble with it. I want to point out that my suggestions are only improvements as it was entirely my fault that I struggled a little bit.

Would it be possible to change two points in the documentation?

1 / Columns options
Maybe it would be a good to highlight the "1of4" modifiers etc... columns to make it clear that it doesn't follow the "of12" rule any more at a certain point. I was used to the 3of12 etc... that I kept missing this point in the documentation.

2/ Important CSS style
It should be common knowledge that we might need to add box-sizing: border-box to the element inside the column to make the solution work properly. Nevertheless, would it be possible to add this point to the documentation for others to not miss it any more in the future?

Describe the solution you would like

1 / Columns options

• Highlight the different modifiers
• Add a sentence just above like: "Note: Be aware that the modifiers are not all defined on a scale of 12 in order to simplify comprehension."

2/ Important CSS style

• Add a sentence to the how it works section like: "Make sure to adapt the css style of your column components according to the grid system. You might need to add a box-sizing: border-box; style to your column element to not overlap with the columns and make them wrap at the set breakpoint."
• Maybe add the css style directly to the modifier class

Describe the alternatives you considered

No response

Additional comments

I know that you'll be adding a new breakpoint soon. My suggestions could be added at the same time :)