# Default
Documentation Vuesax 4.0+
These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x
In the grid system, we define the frame outside the information area according to the row and column, to ensure that each area can have a stable layout.
The following is a brief glimpse of how it works:
- Establish a set of columns in the horizontal space defined by row (abreviada col)
- Your content items should be placed directly in the column, and only the column should be placed directly in the row
- The column grid system has a value of 1 to 12 to represent its range intervals. For example,
w="4"can create three columns of equal width (33.3%). - If the sum of the cabbage segments in a row is greater than 12, then the overflowing cabbage as a whole will start a new line layout.
With the w directive define the column width (vs-col) its value is 1-12, an example of sizes would be:12=100%,6=50%,4=33%