Grid

Grid

Default

Documentation Vuesax Alpha

These docs refer to the Vue 3 support, to see the documents of the previous versions you can do it here 👉 Vuesax (4.0+)

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%

100%
50%
50%
33.3%
33.3%
33.3%
25%
25%
25%
25%
16.6%
16.6%
16.6%
16.6%
16.6%
16.6%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
Code Copied

Offset

To give a distance from the left we have the offset property that with the same measurements 1-12 we add the specific space, an example would be: 12=100%,6=50%,4=33%.

offset = 6
offset = 2
offset = 8
offset = 7
offset = 4
Code Copied

Flex Justify

If we have to align the elements horizontally, use the justify directive that uses CSS attributes as parameters: flex-start, center, flex-end, space-around, space-between.

Default 2
Default 3
Default 4
Center 2
Center 3
Center 4
Flex-end 2
Flex-end 3
Flex-end 4
Space-around 2
Space-around 3
Space-around 4
Space-between 2
Space-between 3
Space-between 4
Code Copied

Align

If we have to align the elements in Vertical, use the align directive that uses CSS attributes as parameters: top,

Top 2
Top 3
Top 4
Middle 2
Middle 3
Middle 4
Bottom 2
Bottom 3
Bottom 4
Code Copied

Responsive

Responsive system Mobile first.

There are some measures that can only be added in a specific device size, the directives are:

  • xxl: 1536px
  • xl: 1280px
  • lg: 1024px
  • md: 768px
  • smx: 640px
  • sm: is default
2
8
2
Code Copied
Last Updated: 2024-06-13, 16:08:34