Version:

Install ​

shell
npm i @mate-vue/block-layout

Import ​

vue
import { MateBlockLayout } from '@mate-vue/block-layout';

Variants ​

Three blocks 4-4-4 ​

vue
<template>
  <MateBlockLayout theme="spacing">
    <div class="block">Layout 4-4-4, Block 1</div>
    <div class="block">Layout 4-4-4, Block 2</div>
    <div class="block">Layout 4-4-4, Block 3</div>
  </MateBlockLayout>
</template>

Two blocks 8-4 ​

html
<template>
  <MateBlockLayout theme="spacing layout-8-4">
    <div class="block">Layout 8-4, Block 1</div>
    <div class="block">Layout 8-4, Block 2</div>
  </MateBlockLayout>
</template>

Two blocks 4-8 ​

html
<template>
  <MateBlockLayout theme="spacing layout-4-8">
    <div class="block">Layout 4-8, Block 1</div>
    <div class="block">Layout 4-8, Block 2</div>
  </MateBlockLayout>
</template>

Two blocks 6-6 ​

html
<template>
  <MateBlockLayout theme="spacing layout-6-6">
    <div class="block">Layout 6-6, Block 1</div>
    <div class="block">Layout 6-6, Block 2</div>
  </MateBlockLayout>
</template>

One block 12 ​

html
<template>
  <MateBlockLayout theme="spacing layout-12">
    <div class="block">Layout 12</div>
  </MateBlockLayout>
</template>

Double bottom padding ​

html
<template>
  <MateBlockLayout theme="spacing double-bottom-padding">
    <div class="block">Layout 4-4-4, Block 1</div>
    <div class="block">Layout 4-4-4, Block 2</div>
    <div class="block">Layout 4-4-4, Block 3</div>
  </MateBlockLayout>
</template>