Grid System

#

Vuestic UI provides you with some flexbox helper classes. Of course, you can opt out using CSS Grid instead (or any other layout-scheme you'd like), but if you prefer using flexbox, we've got you covered. Still, the final decision is totally up to you.

Use the following classes (breakpoints) to apply provided styling to screens of certain widths exclusively.

.xs - (< 640px) - Extra small devices

.sm - (>= 640px && < 1024px) - Small devices

.md - (>= 1024px && < 1440px) - Medium devices

.lg - (>= 1440px && < 1920px) - Large devices

.xl - (>= 1920) - Extra large devices

You can use the offset-classes to set spaces between a given element and the one to the left from it.

.offset-xs - Extra small devices

.offset-sm - Small devices

.offset-md - Medium devices

.offset-lg - Large devices

.offset-xl - Extra large devices

.align-start - cross-start margin edge of the items is placed on the cross-start line

.align-end - cross-end margin edge of the items is placed on the cross-end line

.align-center - items are centered in the cross-axis

.align-baseline - items are aligned the way their baselines align

.align-self-start - cross-start margin edge of the items is placed on the cross-start line

.align-self-end - cross-end margin edge of the items is placed on the cross-end line

.align-self-center - items are centered in the cross-axis

.align-self-baseline - items are aligned the way their baselines align

.align-content-start - lines packed to the start of the container

.align-content-end - lines packed to the end of the container

.align-content-center - lines packed to the center of the container

.align-content-space-between - lines evenly distributed; the first line is at the start of the container while the last one is at the end

.align-content-space-around - lines evenly distributed with equal space between them

.justify-start - items are packed toward the start line

.justify-end - items are packed toward to end line

.justify-center - items are centered along the line

.justify-space-around - items are evenly distributed in the line, items have equal space around on either end

.justify-space-between - items are evenly distributed in the line; first item is on the start line, last item is on the end line

.justify-space-evenly - items are evenly distributed in the line; items have equal space around them