Grid

Grid

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%

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 1
Default 2
Default 3
Center 1
Center 2
Center 3
Flex-end 1
Flex-end 2
Flex-end 3
Space-around 1
Space-around 2
Space-around 3
Space-between 1
Space-between 2
Space-between 3
Code copied

Flex Align

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

We also have the direction property that refers to the cssflex-direction property to change the direction of all the elements (default is row)

Default 1
Default 2
Default 3
Center 1
Center 2
Center 3
Flex-end 1
Flex-end 2
Flex-end 3
Space-around 1
Space-around 2
Space-around 3
Space-between 1
Space-between 2
Space-between 3
Code copied

Flex Order

In some cases, we want to order the elements to our liking. To do this, use the order property has a parameter, you just have to pass the number in which we want to ordervs-col with respect to your brothers vs-col within the samevs-row

1
2
3
4
Code copied

Responsive

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

  • lg: is for large devices such as desktops or laptops (large).
  • sm: is for medium-sized devices such as laptops or tablets.
  • xs: is for small devices such as tablets (small) and phones.
2
8
2
Code copied
Last Updated: 6/18/2020, 1:13:20 PM