Vuetify — Column Spacing and Ordering

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Order Last or First

We can set the order prop to last and first to set the columns to last and first.

For example, we can write:

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col order="last">  
        <v-card class="pa-2" outlined tile>First, but last</v-card>  
      </v-col>  
      <v-col>  
        <v-card class="pa-2" outlined tile>Second, but unordered</v-card>  
      </v-col>  
      <v-col order="first">  
        <v-card class="pa-2" outlined tile>Third, but first</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Offset

We can use the offset props to add spaces between columns.

For example, we can write:

<template>  
  <v-container class="grey lighten-5">  
    <v-row class="mb-6" no-gutters>  
      <v-col md="4">  
        <v-card class="pa-2" outlined tile>.col-md-4</v-card>  
      </v-col>  
      <v-col md="2" offset-md="6">  
        <v-card class="pa-2" outlined tile>.col-md-2 .offset-md-6</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have the offset-md prop to set the number of columns between this and the div before it when the md breakpoint is hit.

Margin Utilities

We can add padding and margin to columns.

For example, we can write:

<template>  
  <v-container class="grey lighten-5">  
    <v-row>  
      <v-col md="4">  
        <v-card class="pa-2" outlined tile>.col-md-4</v-card>  
      </v-col>  
      <v-col md="4" class="ml-auto">  
        <v-card class="pa-2" outlined tile>.col-md-4 .ml-auto</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

The pa-2 class adds padding around the classes.

ml-auto adds margin between the v-col components.

Nested Grid

We can create a grid that’s nested in a parent grid.

For instance, we can write:

<template>  
  <v-container class="grey lighten-5">  
    <v-row>  
      <v-col sm="9">  
        <v-card class="pa-2" outlined tile>Level 1</v-card>  
        <v-row no-gutters>  
          <v-col cols="8" sm="6">  
            <v-card class="pa-2" outlined style="background-color: lightgrey;" tile>Level 2</v-card>  
          </v-col>  
          <v-col cols="4" sm="6">  
            <v-card class="pa-2" outlined style="background-color: lightgrey;" tile>Level 3</v-card>  
          </v-col>  
        </v-row>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

And we have v-row s inside v-col s to nest them.

Spacers

The v-spacer component is useful when we fill available space or make space between 2 components.

For example, we can write:

<template>  
  <v-container class="grey lighten-5">  
    <v-row>  
      <v-col>  
        <v-card class="pa-2" outlined tile>.col</v-card>  
      </v-col>  
      <v-spacer></v-spacer>  
      <v-col>  
        <v-card class="pa-2" outlined tile>.col</v-card>  
      </v-col>  
      <v-spacer></v-spacer>  
      <v-col>  
        <v-card class="pa-2" outlined tile>.col</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

to add the v-spacer component to space out the v-col s evenly.

Conclusion

We can order columns and space them out the way we like with various props.