1.2 簡易的柵格系統

Bulma最著名的當屬其簡單明了的柵格架構：

    <div class="columns">
      <div class="column">
        <! -- 第1列 -->
      </div>
      <div class="column">
        <! -- 第2列 -->
      </div>
    </div>

就是這樣，只需兩個CSS類（columns作為容器類，column作為其子類），即可實現響應式柵格系統，無須指定其他任何維度，兩列會自動分占寬度的50%。

如果想要第3列，只需再添加一個column即可：

    <div class="columns">
      <div class="column">
        <! -- 第1列 -->
      </div>
      <div class="column">
        <! -- 第2列 -->
      </div>
      <div class="column">
        <! -- 第3列 -->
      </div>
    </div>

每一列會自動占據33% 的寬度，無須編寫額外的代碼。如果想要更多列，按上述操作添加column即可實現，Bulma會幫你自動適配大小。