Add gap

docs/documentation/columns/gap.html

@@ -0,0 +1,43 @@
+---
+title: Columns gap
+layout: documentation
+doc-tab: columns
+doc-subtab: gap
+---
+
+{% capture columns_gap %}
+<div class="columns">
+  <div class="column">
+    First column
+  </div>
+  <div class="column">
+    Second column
+  </div>
+  <div class="column">
+    Third column
+  </div>
+  <div class="column">
+    Fourth column
+  </div>
+</div>
+{% endcapture %}
+
+{% include subnav-columns.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Columns gap</h1>
+    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
+    <hr>
+    <div class="content">
+      <p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
+      <ol>
+        <li>Add a <code>columns</code> container</li>
+        <li>Add as many <code>column</code> elements as you want</li>
+      </ol>
+      <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
+    </div>
+
+    {% highlight html %}{{ columns_gap }}{% endhighlight %}
+  </div>
+</section>