Version:

Install ​

shell
npm i @mate-react/block-layout

Import ​

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

Variants ​

Default (4-4-4) ​

tsx
<MateBlockLayout theme="spacing">
  <div>Block 1</div>
  <div>Block 2</div>
  <div>Block 3</div>
</MateBlockLayout>

Layout 8-4 ​

tsx
<MateBlockLayout theme="spacing layout-8-4">
  <div>Block 1</div>
  <div>Block 2</div>
</MateBlockLayout>

Layout 4-8 ​

tsx
<MateBlockLayout theme="spacing layout-4-8">
  <div>Block 1</div>
  <div>Block 2</div>
</MateBlockLayout>

Layout 6-6 ​

tsx
<MateBlockLayout theme="spacing layout-6-6">
  <div>Block 1</div>
  <div>Block 2</div>
</MateBlockLayout>

Layout 12 ​

tsx
<MateBlockLayout theme="spacing layout-12">
  <div>Block 1</div>
</MateBlockLayout>