Grid columns

This provides classes for different grid column sizes from one column up to 12 columns.

Below is a basic example:

<div class="grid g-3 nc-2">
    <div class="col-1-2">Column 1</div>
    <div class="col-1-2">Column 2</div>
</div>

Often you'll set different sizes for a column based on the screen width. Below is a simple example:

<div class="grid g-3 nc-2">
    <div class="col-1-1 col-1-2-sm col-1-3-lg">
        I will be full width by default,
        then for small screen sizes to large screen sizes I'll be half width,
        and then for large screens and up I'll be one-third width.
    </div>
    <div class="col-1-1 col-1-2-sm col-2-3-lg">
        I will be full width by default,
        then for small screen sizes to large screen sizes I'll be half width,
        and then for large screens and up I'll be two-third width.
    </div>
</div>

Combined imports

If you will use all of the column sizes then you can use the combined import file.

@import 'cacao-css/dist/grid-column/combined-import.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/grid-column/3xs/combined-import.css';
@import 'cacao-css/dist/grid-column/2xs/combined-import.css';
@import 'cacao-css/dist/grid-column/xs/combined-import.css';
@import 'cacao-css/dist/grid-column/sm/combined-import.css';
@import 'cacao-css/dist/grid-column/md/combined-import.css';
@import 'cacao-css/dist/grid-column/lg/combined-import.css';
@import 'cacao-css/dist/grid-column/xl/combined-import.css';
@import 'cacao-css/dist/grid-column/2xl/combined-import.css';
@import 'cacao-css/dist/grid-column/3xl/combined-import.css';
@import 'cacao-css/dist/grid-column/4xl/combined-import.css';
@import 'cacao-css/dist/grid-column/5xl/combined-import.css';

Combined imports​

Combined imports