The grid and design system should be built when there is already a sketch of the design. For example, when creating a concept, when there is a sketch of several blocks and it is clear how they will be located.

Elements placed on the grid speed up the development process. But for this to really work, there must be very few exceptions when we deviate from the grid in design. Otherwise, why is it needed?

Many popular frameworks use a 12-column grid system with equal width. Of the small numbers, 12 is easiest to divide: you can use grids consisting of 12, 6, 4, 3, 2 evenly spaced columns or even 1 column. This is also convenient for responsive design.

But it is not always necessary to focus on the basic 12-column grid. Content defines the grid, not the other way around. The number of columns should match the content.