基本上所有的UI組件庫都有自己的布局組件，我們也要有，看了下Bulma，其中的布局組件叫columns。翻了下，實現(xiàn)的東西足夠用了，下面就開始動手吧

幾個要注意點

1. Bulma的columns完全基于CSS3的flex布局
2. Bulma的柵格分12列
3. Bulma實現(xiàn)的布局方式有多種，我們只選擇了其中比較常用的

一，各列寬度都相等的情況

UI組件庫-封裝列布局組件（柵格）

如上圖，Bulma處理的相當(dāng)簡便，我們的組件目錄安排如下：

- components  - columns    - Row.vue    - Columns.vue

Row.vue 的主要內(nèi)容如下：

<div class="columns"></div>

Columns.vue 的主要內(nèi)容如下：

<div class="column">    First column  </div>

用法：

<Row>      <Column>        <div class="red">111</div> <!-- .red 是自定義樣式 -->      </Column>      <Column>        <div class="red">222</div> <!-- .red 是自定義樣式 -->      </Column></Row>

對于要平均分配父元素寬度的子元素來說，這個很方便，有幾個子元素，就放幾個<Column>就可以了

二，列寬度不相等的情況

這個情況很常見，Bulma有不同的實現(xiàn)方式，比如使用樣式 is-two-thirds 表示此列寬度占總寬度的三分之二。之前的習(xí)慣的原因，感覺不是特別喜歡這樣的用法，還好Bulma還支持柵格化的做法，不過柵格是和Bootstrap類似的12列布局而不是Element的24列布局，這點對用習(xí)慣Element的童鞋還是要留意一下。

UI組件庫-封裝列布局組件（柵格）

如上圖，樣式名是 is-數(shù)字 的形式，正好可以和Element一樣，把數(shù)字給咱們的組件，咱們就給它分配相應(yīng)的寬度，感覺沒啥問題了。

三，列間距的問題

經(jīng)常會有列之間的距離要自定義的情況，咱們也要支持，這一塊Bulma處理的也很好

UI組件庫-封裝列布局組件（柵格）

如上圖，只需要在 .columns 后面加一個 is-數(shù)字 就可以了！

說明一下：數(shù)字的取值范圍【0, 8】，另外還需特別注意的是，除了這個 is-數(shù)字 之外還要加一個 is-variable 樣式才可以正常工作，切記！

四，被忘記的列偏移問題

這塊Bulma是支持的，不過放到了一個不是特別明顯的位置，我們平時也比較常用，就加上它

UI組件庫-封裝列布局組件（柵格）

再如上圖，Bulma的實現(xiàn)方式還是有多種，咱們還是選 is-數(shù)字 這樣的形式的，其實關(guān)鍵點就是把一個樣式名加到 .column 的后面！

行了，上面就是組件要搞定的問題，讓我們很輕松的就可以排版布局頁面，如果你都清楚要求的，下面就開始吧

直接上代碼：

// Coumn<template>  <div class="column" :class="[span?'is-'+span:'', offset?'is-offset-'+offset:'']">    <slot></slot>  </div></template><script>export default {  props: {    span: {      type: Number,      default: 0    },    offset: {      type: Number,      default: 0    }  }};</script>// Row<template>  <div class="columns" :class="[gap?'is-variable is-'+gap:'']">    <slot></slot>  </div></template><script>export default {  props: {    gap: {      type: Number,      default: 3    }  }};</script>

然后就可以很省事的使用了：

<Row>      <Column>        <div class="red"></div>      </Column>    </Row>    <hr />    <Row :gap="3">      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>    </Row>    <hr />    <Row :gap="3">      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>    </Row>    <hr />    <Row>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>      <Column>        <div class="red"></div>      </Column>    </Row>    <hr />    <Row>      <Column :span="3">        <div class="red"></div>      </Column>      <Column :span="9">        <div class="red"></div>      </Column>    </Row>    <hr />    <Row>      <Column :span="3">        <div class="red"></div>      </Column>      <Column :span="5" :offset="1">        <div class="red"></div>      </Column>      <Column :span="3">        <div class="red"></div>      </Column>    </Row>

截張圖上來：

UI組件庫-封裝列布局組件（柵格）

多謝留言關(guān)注！