Yes, the redundancy is intentional. And in case there is any doubt, we repeat it. "Only one." Now that it's clear, let’s get down to it, let's talk about the grid.
Every self-respecting web design has a defined grid. It can have more or less columns. With or without gap. It can be an unusual grid or a typical 12-column grid. But every web design has at least one defined grid. It is one of the first classes of any self-respecting web design course.
And if we stick to marketing sites, we find a conservative approach to the grid, where almost the vast majority always resort to the 12 columns.
In this context, the question that The System asks is the following. If the vast majority of the layouts we work on have a single grid on which almost all layout compositions are based, why in our Webflow build do we create independent classes every time we have a new layout with columns? The answer is not clear, but the truth is that this approach opens the possibility for each composition in columns to have different characteristics that are unrelated to each other. Thus losing the underlying order and visual pleasure that the grid provides.
For this reason, in The System, all the layouts that respond to the grid are based on a single global grid. This grid is defined as a structural class.
[Grid] class that defines our global grid is combined seamlessly with the vertical and horizontal space modules via multi classes. In this way we can modify the corresponding gaps of our grid when necessaryThe default grid in The System may not be aligned with the layout we are going to work with. In these cases, we can modify the number of columns and the default gap of our grid.
It can also happen that the layout with which we work has more than one grid. In this case, it is enough to create as many grids as are included in the layout. Although the truth, for marketing sites, finding two or more grids is rare.
Prev
<aside> ⬅️ Multi classes
</aside>
Next
<aside> ➡️ Gap: space between contiguous elements.
</aside>