<p>The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the <code>--grid-maxWidth</code> in the <code>:root</code>.</p>
<p>Much like other frameworks, wrap your content in a <code>.container</code> to center it on the page.</p>
<br>
<h5>Flexible grid</h5>
<p>A simple way to build flexible responsive columns:</p>
<ul>
<li>Add a <code>.row</code> container</li>
<li>Add as many <code>.col</code> elements as you want</li>
</ul>
<p>Each column will have an <strong>equal width</strong>, in a row. There is no restriction on number of columns, but it is recommended <strong>not</strong> to add more than 12 columns in a row.</p>
<divclass="row">
<divclass="col">
<divclass="card is-center">.col</div>
</div>
</div>
<divclass="row">
<divclass="col">
<divclass="card is-center">.col</div>
</div>
<divclass="col">
<divclass="card is-center">.col</div>
</div>
<divclass="col">
<divclass="card is-center">.col</div>
</div>
</div>
{% highlight html %}
<divclass="row">
<divclass="col"> .col </div>
</div>
<divclass="row">
<divclass="col"> .col </div>
<divclass="col"> .col </div>
<divclass="col"> .col </div>
</div>
{% endhighlight %}
<hr>
<h5>Sized</h5>
<p>You can also specify the size of the columns</p>
<ul>
<li>Add a <code>.row</code> container</li>
<li>Add a <code>.col-n</code> child where <strong>n</strong> can be from 1 to 12</li>
</ul>
<p>Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use <code>.col-4</code>.</p>
<divclass="row">
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
<divclass="col-1">
<divclass="card is-center">.col-1</div>
</div>
</div>
<divclass="row">
<divclass="col-4">
<divclass="card is-center">.col-4</div>
</div>
<divclass="col-4">
<divclass="card is-center">.col-4</div>
</div>
<divclass="col-4">
<divclass="card is-center">.col-4</div>
</div>
</div>
<divclass="row">
<divclass="col-12">
<divclass="card is-center">.col-12</div>
</div>
</div>
{% highlight html %}
<divclass="row">
<divclass="col-1"> .col-1 </div>
<!-- repeat 11 times -->
</div>
<divclass="row">
<divclass="col-4"> .col-4 </div>
<!-- repeat twice -->
</div>
<divclass="row">
<divclass="col-12"> .col-12 </div>
</div>
{% endhighlight %}
<hr>
<h5>Mix-n-Match</h5>
<p>You can use a combination of <strong>flexible</strong> and <strong>sized</strong> columns.</p>
<p>When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.</p>
<p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a <code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is one of the <ahref="#utilities">utility</a> class.</p>
