This article will try to clarify how Ant Design grid system works
Lets first clarify what we usually think that is a Row and a Col:
A Row lays its children in the horizontal direction:
A Col lays its children in the vertical direction:
In Ant we have Col and Row components, and they’re part of the grid system, in this grid system a Row is divided into 24 sections, to occupy units of those sections you need to have a component that can “span” using those units, for that we have Col :
If you happen to “span” more than 24 units in single Row, the row wraps to the next line:
Now, if you stop to think about it, the Row is behaving like a Row AND a Col at the same time:
