Grid

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to our configurable column system, seven default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Overview

Cactu is built with flexbox and is fully responsive, also has two different ways to use the grid:

  • Difining a max column grid (12 by default) and used it with column-of-<num_column> classes.
  • Add the neccesary columns that you need.

Defined column size

You can define the size of the column that you need, depending the $maximun-columns value, by default is on 12 columns:

size of 4 columns
size of 4 columns
size of 4 columns
<div class="container">
  <div class="columns">
    <div class="column-of-4">
      size of 4 columns
    </div>
    <div class="column-of-4">
      size of 4 columns
    </div>
    <div class="column-of-4">
      size of 4 columns
    </div>
  </div>
</div>

Adjusted columns

You can add the necessary columns (column), and these will fit their container, which in this case is the columns class:

adjusted column
adjusted column
adjusted column
<div class="container">
  <div class="columns">
    <div class="column">
      adjusted column
    </div>
    <div class="column">
      adjusted column
    </div>
    <div class="column">
      adjusted column
    </div>
  </div>
</div>

Grid options

By default Cactu define the names of classes for columns (column-of-<num_column>) including the name for the small screen sizes (tablet-column-of-<num_column>, cellphone-column-of-<num_column>), but too, you can modified a little the name, for that consult the grid API documentation (coming soon).

Cellphone Cellphone-Tablet Tablet Small desktop Medium desktop Large desktop
Container width <576px 576px-767px 768px-959px 960px-1199px 1200px-1343 1344+
Class prefix .column-of- .cellphone-column-of- .tablet-column-of- .column-of- .column-of- .column-of-
Gutter width 30px (15px on each side of a column) 20px (10px on each side of a column) 30px (15px on each side of a column)
# default columns 12
Nestable Yes
Column ordering Yes

Watch more examples to use the Cactu’s grid