Vuetify — Paddings and Margins

Vuetify is a popular UI framework for Vue apps.

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

Flex align-content

We can add the align-content classes to change the alignment of flexbox content.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card
          class="d-flex align-content-start flex-wrap"
          color="grey lighten-2"
          flat
          tile
          min-height="200"
        >
          <v-card v-for="n in 10" :key="n" class="pa-2" outlined tile>item</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have the align-content-start class to align the content to the left.

There are other classes for other alignments.

Flex Grow and Shrink

Vuetify has the flex-{condition}-{value} classes to grow and shrink the items.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="2" class="flex-grow-0 flex-shrink-0">
        <v-card class="pa-2" outlined tile>2 column wide</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

to create a column 2 columns wide and use the flex-grow-0 and flex-shrink-0 classes to fill the container.

Float

We can apply a custom float with Vuetify classes.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <div>
          <div class="float-left">Float left</div>
          <br />
          <div class="float-right">Float right</div>
          <br />
          <div class="float-none">Don't float</div>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have float-left class to float left.

float-right floats right.

float-none disables float.

Responsive

Floats can be applied with some breakpoints.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <div>
          <div class="float-sm-left">sm</div>
          <br />
          <div class="float-md-left">md</div>
          <br />
          <div class="float-lg-left">lg</div>
          <br />
          <div class="float-xl-left">xl</div>
          <br />
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have the breakpoint in the class name to only apply the float if the breakpoint is the given one or wider.

Spacing

Spacing can be changed with classes in the following format:

{property}{direction}-{size}

property can be:

• m – applies margin
• p – applies padding

direction can be:

• t – applies the spacing for margin-top and padding-top
• b – applies the spacing for margin-bottom and padding-bottom
• l – applies the spacing for margin-left and padding-left
• r – applies the spacing for margin-right and padding-right
• s – applies the spacing for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)
• e – applies the spacing for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)
• x – applies the spacing for both *-left and *-right
• y – applies the spacing for both *-top and *-bottom
• a – applies the spacing for the property in all directions

size is 0 to 16 to set the size from 0 to 64px.

n1 to n16 set the margin to -4px to -64px.

We can use mx-auto to set the margin size automatically:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="mx-auto" color="white" width="200px">
          <v-card-text>Centered</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We can change the padding by writing:

<template>
  <v-container>
    <v-row class="text-center">
      <v-card class="pa-md-4 mx-lg-auto" color="white" width="250px">
        <v-card-text>text</v-card-text>
      </v-card>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have the pa-md-4 class to change the padding for md breakpoint and up to 16px.

Conclusion

Vuetify provides us with many classes for changing margins and padding.