Grid

Default

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 (s-col) its value is 1-12, an example of sizes would be:12=100%,6=50%,4=33%

Code copied

<template>
  <div class="grid">
    <s-row>
      <s-col> 100% </s-col>
    </s-row>

    <s-row>
      <s-col v-for="_ in 2" :key="_" :sm="6"> 50% </s-col>
    </s-row>

    <s-row>
      <s-col v-for="_ in 3" :key="_" :sm="4"> 33.3% </s-col>
    </s-row>

    <s-row>
      <s-col v-for="_ in 4" :key="_" :sm="3"> 25% </s-col>
    </s-row>

    <s-row>
      <s-col v-for="_ in 6" :key="_" :sm="2"> 16.6% </s-col>
    </s-row>

    <s-row>
      <s-col v-for="_ in 12" :key="_" :sm="1"> 8.3% </s-col>
    </s-row>
  </div>
</template>

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%.

Code copied

<template>
  <div>
    <s-row>
      <s-col :push="6" :span="2"> offset = 6 </s-col>
    </s-row>

    <s-row>
      <s-col :push="2" :span="2"> offset = 2 </s-col>
    </s-row>

    <s-row>
      <s-col :push="8" :span="2"> offset = 8 </s-col>
    </s-row>

    <s-row>
      <s-col :push="7" :span="2"> offset = 7 </s-col>
    </s-row>

    <s-row>
      <s-col :push="4" :span="2"> offset = 4 </s-col>
    </s-row>
  </div>
</template>

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.

Code copied

<template>
  <div class="grid">
    <s-row>
      <s-col v-for="i in 3" :key="i" :sm="2"> Default {{ i + 1 }} </s-col>
    </s-row>

    <s-row justify="center">
      <s-col v-for="i in 3" :key="i" :sm="2"> Center {{ i + 1 }} </s-col>
    </s-row>

    <s-row justify="end">
      <s-col v-for="i in 3" :key="i" :sm="2"> Flex-end {{ i + 1 }} </s-col>
    </s-row>

    <s-row justify="space-around">
      <s-col v-for="i in 3" :key="i" :sm="2"> Space-around {{ i + 1 }} </s-col>
    </s-row>

    <s-row justify="space-between">
      <s-col v-for="i in 3" :key="i" :sm="2"> Space-between {{ i + 1 }} </s-col>
    </s-row>
  </div>
</template>
<style scoped lang="scss">
@function -var($var) {
  @return unquote('var(--sax-' + var + ')');
}

Align

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

Code copied

<template>
  <div class="grid">
    <s-row justify="center">
      <s-col v-for="i in 3" :key="i" :sm="2"> Top {{ i + 1 }} </s-col>
    </s-row>

    <s-row align="middle" justify="center">
      <s-col v-for="i in 3" :key="i" :sm="2"> Middle {{ i + 1 }} </s-col>
    </s-row>

    <s-row align="bottom" justify="center">
      <s-col v-for="i in 3" :key="i" :sm="2"> Bottom {{ i + 1 }} </s-col>
    </s-row>
  </div>
</template>

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

Code copied

<template>
  <div class="grid">
    <s-row>
      <s-col :sm="num">
        {{ num }}
      </s-col>
      <s-col :sm="num2">
        {{ num2 }}
      </s-col>
      <s-col :sm="num">
        {{ num }}
      </s-col>
    </s-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const num = ref(2)
const num2 = ref(8)

onMounted(() => {
  setInterval(() => {
    if (num.value == 2) {
      num.value = 4
      num2.value = 4
    } else if (num.value == 4) {
      num.value = 1
      num2.value = 10
    } else if (num.value == 1) {
      num.value = 5
      num2.value = 2
    } else if (num.value == 5) {
      num.value = 2
      num2.value = 8
    }
  }, 2000)
})
</script>