Ant Design Vue — Grids and Layouts

Photo by Rostyslav Savchyn on Unsplash

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Grid Order

We can change the grid order by setting the order prop:

<template>
  <div id="app">
    <a-row type="flex">
      <a-col :span="6" :order="4">1 order-4</a-col>
      <a-col :span="6" :order="3">2 order-3</a-col>
      <a-col :span="6" :order="2">3 order-2</a-col>
      <a-col :span="6" :order="1">4 order-1</a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We set the order to a number.

Grid Column Offset

We can add the offset prop to add gaps between grid columns. For example, we can write:

<template>
  <div id="app">
    <a-row>
      <a-col :span="8">col-8</a-col>
      <a-col :span="8" :offset="8">col-8</a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Responsive Grid

We can set the sizes of the columns at different breakpoints.

For example, we can write:

<template>
  <div id="app">
    <a-row>…