Cherry grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
<!--- Grid Container -->
<div class="container">
<!--- Grid Row -->
<div class="row">
<!--- Grid Columns -->
<div class="col-xs-6 col-lg-4">
<div>Child 1</div>
</div>
<div class="col-xs-6 col-lg-4">
<div>Child 2</div>
</div>
<div class="col-xs-12 col-lg-4">
<div>Child 3</div>
</div>
</div>
</div>
Child 1
Child 2
Child 3
Child 1
Child 2
Child 3
Below you can find the main container class name as well as global classes for aligning text.
Class Name | Description |
---|---|
container | Main container |
container fluid | Extend container width to max allowed |
text-align-right | Align text to right |
text-align-center | Align text to center |
text-align-left | Align text to left |
Below you can find the class names available for the row container.
Class Name | Description |
---|---|
row | Row container for the columns |
gutter-default | Default gutter space for the Row container |
gutter-medium | Medium gutter space for the Row container |
gutter-big | Big gutter space for the Row container |
gutter-xs-default | Default row gutter for XS media query |
gutter-xs-medium | Medium row gutter for XS media query |
gutter-xs-big | Big row gutter for XS media query |
gutter-sm-default | Default row gutter for SM media query |
gutter-sm-medium | Medium row gutter for SM media query |
gutter-sm-big | Big row gutter for SM media query |
gutter-md-default | Default row gutter for MD media query |
gutter-md-medium | Medium row gutter for MD media query |
gutter-md-big | Big row gutter for MD media query |
gutter-lg-default | Default row gutter for LG media query |
gutter-lg-medium | Medium row gutter for LG media query |
gutter-lg-big | Big row gutter for LG media query |
gutter-xl-default | Default row gutter for XL media query |
gutter-xl-medium | Medium row gutter for XL media query |
gutter-xl-big | Big row gutter for XL media query |
gutter-xxl-default | Default row gutter for XXL media query |
gutter-xxl-medium | Medium row gutter for XXL media query |
gutter-xxl-big | Big row gutter for XXL media query |
gutter-xxxl-default | Default row gutter for XXXL media query |
gutter-xxxl-medium | Medium row gutter for XXXL media query |
gutter-xxxl-big | Big row gutter for XXXL media query |
All column class names are listed below.
Class Name | Description |
---|---|
col-1 | 1 Column layout |
col-2 | 2 Columns layout |
col-3 | 3 Columns layout |
col-4 | 4 Columns layout |
col-5 | 5 Columns layout |
col-6 | 6 Columns layout |
col-7 | 7 Columns layout |
col-8 | 8 Columns layout |
col-9 | 9 Columns layout |
col-10 | 10 Columns layout |
col-11 | 11 Columns layout |
col-12 | 12 Columns layout |
col-auto | Auto Column layout |
col-order-first | Order column as first |
col-order-last | Order column as last |
col-xs-1 | 1 Column layout on XS |
col-xs-2 | 2 Columns layout on XS |
col-xs-3 | 3 Columns layout on XS |
col-xs-4 | 4 Columns layout on XS |
col-xs-5 | 5 Columns layout on XS |
col-xs-6 | 6 Columns layout on XS |
col-xs-7 | 7 Columns layout on XS |
col-xs-8 | 8 Columns layout on XS |
col-xs-9 | 9 Columns layout on XS |
col-xs-10 | 10 Columns layout on XS |
col-xs-11 | 11 Columns layout on XS |
col-xs-12 | 12 Columns layout on XS |
col-xs-auto | Auto Column layout on XS |
col-xs-order-first | Order column as first on XS |
col-xs-order-last | Order column as last on XS |
col-sm-1 | 1 Column layout on SM |
col-sm-2 | 2 Columns layout on SM |
col-sm-3 | 3 Columns layout on SM |
col-sm-4 | 4 Columns layout on SM |
col-sm-5 | 5 Columns layout on SM |
col-sm-6 | 6 Columns layout on SM |
col-sm-7 | 7 Columns layout on SM |
col-sm-8 | 8 Columns layout on SM |
col-sm-9 | 9 Columns layout on SM |
col-sm-10 | 10 Columns layout on SM |
col-sm-11 | 11 Columns layout on SM |
col-sm-12 | 12 Columns layout on SM |
col-sm-auto | Auto Column layout on SM |
col-sm-order-first | Order column as first on SM |
col-sm-order-last | Order column as last on SM |
col-md-1 | 1 Column layout on MD |
col-md-2 | 2 Columns layout on MD |
col-md-3 | 3 Columns layout on MD |
col-md-4 | 4 Columns layout on MD |
col-md-5 | 5 Columns layout on MD |
col-md-6 | 6 Columns layout on MD |
col-md-7 | 7 Columns layout on MD |
col-md-8 | 8 Columns layout on MD |
col-md-9 | 9 Columns layout on MD |
col-md-10 | 10 Columns layout on MD |
col-md-11 | 11 Columns layout on MD |
col-md-12 | 12 Columns layout on MD |
col-md-auto | Auto Column layout on MD |
col-md-order-first | Order column as first on MD |
col-md-order-last | Order column as last on MD |
col-lg-1 | 1 Column layout on LG |
col-lg-2 | 2 Columns layout on LG |
col-lg-3 | 3 Columns layout on LG |
col-lg-4 | 4 Columns layout on LG |
col-lg-5 | 5 Columns layout on LG |
col-lg-6 | 6 Columns layout on LG |
col-lg-7 | 7 Columns layout on LG |
col-lg-8 | 8 Columns layout on LG |
col-lg-9 | 9 Columns layout on LG |
col-lg-10 | 10 Columns layout on LG |
col-lg-11 | 11 Columns layout on LG |
col-lg-12 | 12 Columns layout on LG |
col-lg-auto | Auto Column layout on LG |
col-lg-order-first | Order column as first on LG |
col-lg-order-last | Order column as last on LG |
col-xl-1 | 1 Column layout on XL |
col-xl-2 | 2 Columns layout on XL |
col-xl-3 | 3 Columns layout on XL |
col-xl-4 | 4 Columns layout on XL |
col-xl-5 | 5 Columns layout on XL |
col-xl-6 | 6 Columns layout on XL |
col-xl-7 | 7 Columns layout on XL |
col-xl-8 | 8 Columns layout on XL |
col-xl-9 | 9 Columns layout on XL |
col-xl-10 | 10 Columns layout on XL |
col-xl-11 | 11 Columns layout on XL |
col-xl-12 | 12 Columns layout on XL |
col-xl-auto | Auto Column layout on XL |
col-xl-order-first | Order column as first on XL |
col-xl-order-last | Order column as last on XL |
col-xxl-1 | 1 Column layout on XXL |
col-xxl-2 | 2 Columns layout on XXL |
col-xxl-3 | 3 Columns layout on XXL |
col-xxl-4 | 4 Columns layout on XXL |
col-xxl-5 | 5 Columns layout on XXL |
col-xxl-6 | 6 Columns layout on XXL |
col-xxl-7 | 7 Columns layout on XXL |
col-xxl-8 | 8 Columns layout on XXL |
col-xxl-9 | 9 Columns layout on XXL |
col-xxl-10 | 10 Columns layout on XXL |
col-xxl-11 | 11 Columns layout on XXL |
col-xxl-12 | 12 Columns layout on XXL |
col-xxl-auto | Auto Column layout on XXL |
col-xxl-order-first | Order column as first on XXL |
col-xxl-order-last | Order column as last on XXL |
col-xxxl-1 | 1 Column layout on XXXL |
col-xxxl-2 | 2 Columns layout on XXXL |
col-xxxl-3 | 3 Columns layout on XXXL |
col-xxxl-4 | 4 Columns layout on XXXL |
col-xxxl-5 | 5 Columns layout on XXXL |
col-xxxl-6 | 6 Columns layout on XXXL |
col-xxxl-7 | 7 Columns layout on XXXL |
col-xxxl-8 | 8 Columns layout on XXXL |
col-xxxl-9 | 9 Columns layout on XXXL |
col-xxxl-10 | 10 Columns layout on XXXL |
col-xxxl-11 | 11 Columns layout on XXXL |
col-xxxl-12 | 12 Columns layout on XXXL |
col-xxxl-auto | Auto Column layout on XXXL |
col-xxxl-order-first | Order column as first on XXXL |
col-xxxl-order-last | Order column as last on XXXL |