Number of grid columns

When building grids using the column size and gutter classes, the CSS needs to know the number of columns in the grid in order to correctly adjust the column widths for the gutters.

Our solution is based on https://stackoverflow.com/a/76429435. The CSS needs to set the correct --num-cols variable. These classes help in doing that.

Here is an 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>

The nc-2 class specifies that there are two columns in the grid. ("nc" = "number of columns")

Without the nc-2 class the column widths would not be accurate.

The following classes are available:

Class	Number of columns
nc-1	1 column
nc-2	2 columns
nc-3	3 columns
nc-4	4 columns
nc-5	5 columns
nc-6	6 columns
nc-7	7 columns
nc-8	8 columns
nc-9	9 columns
nc-10	10 columns
nc-11	11 columns
nc-12	12 columns

Media query classes

Each column size has a class to go with each of the media query viewport sizes. For example, the "two columns" class has the following class names for each media query size:

nc-2-3xs
nc-2-2xs
nc-2-xs
nc-2-sm
nc-2-md
nc-2-lg
nc-2-xl
nc-2-2xl
nc-2-3xl
nc-2-4xl
nc-2-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/grid/num-columns.css';

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS

Default styles

grid/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

.nc-1 {
    --num-cols: 1;
}

.nc-2 {
    --num-cols: 2;
}

.nc-3 {
    --num-cols: 3;
}

.nc-4 {
    --num-cols: 4;
}

.nc-5 {
    --num-cols: 5;
}

.nc-6 {
    --num-cols: 6;
}

.nc-7 {
    --num-cols: 7;
}

.nc-8 {
    --num-cols: 8;
}

.nc-9 {
    --num-cols: 9;
}

.nc-10 {
    --num-cols: 10;
}

.nc-11 {
    --num-cols: 11;
}

.nc-12 {
    --num-cols: 12;
}

3xs styles

grid/3xs/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-3xs) {
    .nc-1-3xs {
        --num-cols: 1;
    }

    .nc-2-3xs {
        --num-cols: 2;
    }

    .nc-3-3xs {
        --num-cols: 3;
    }

    .nc-4-3xs {
        --num-cols: 4;
    }

    .nc-5-3xs {
        --num-cols: 5;
    }

    .nc-6-3xs {
        --num-cols: 6;
    }

    .nc-7-3xs {
        --num-cols: 7;
    }

    .nc-8-3xs {
        --num-cols: 8;
    }

    .nc-9-3xs {
        --num-cols: 9;
    }

    .nc-10-3xs {
        --num-cols: 10;
    }

    .nc-11-3xs {
        --num-cols: 11;
    }

    .nc-12-3xs {
        --num-cols: 12;
    }
}

2xs styles

grid/2xs/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-2xs) {
    .nc-1-2xs {
        --num-cols: 1;
    }

    .nc-2-2xs {
        --num-cols: 2;
    }

    .nc-3-2xs {
        --num-cols: 3;
    }

    .nc-4-2xs {
        --num-cols: 4;
    }

    .nc-5-2xs {
        --num-cols: 5;
    }

    .nc-6-2xs {
        --num-cols: 6;
    }

    .nc-7-2xs {
        --num-cols: 7;
    }

    .nc-8-2xs {
        --num-cols: 8;
    }

    .nc-9-2xs {
        --num-cols: 9;
    }

    .nc-10-2xs {
        --num-cols: 10;
    }

    .nc-11-2xs {
        --num-cols: 11;
    }

    .nc-12-2xs {
        --num-cols: 12;
    }
}

xs styles

grid/xs/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-xs) {
    .nc-1-xs {
        --num-cols: 1;
    }

    .nc-2-xs {
        --num-cols: 2;
    }

    .nc-3-xs {
        --num-cols: 3;
    }

    .nc-4-xs {
        --num-cols: 4;
    }

    .nc-5-xs {
        --num-cols: 5;
    }

    .nc-6-xs {
        --num-cols: 6;
    }

    .nc-7-xs {
        --num-cols: 7;
    }

    .nc-8-xs {
        --num-cols: 8;
    }

    .nc-9-xs {
        --num-cols: 9;
    }

    .nc-10-xs {
        --num-cols: 10;
    }

    .nc-11-xs {
        --num-cols: 11;
    }

    .nc-12-xs {
        --num-cols: 12;
    }
}

sm styles

grid/sm/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-sm) {
    .nc-1-sm {
        --num-cols: 1;
    }

    .nc-2-sm {
        --num-cols: 2;
    }

    .nc-3-sm {
        --num-cols: 3;
    }

    .nc-4-sm {
        --num-cols: 4;
    }

    .nc-5-sm {
        --num-cols: 5;
    }

    .nc-6-sm {
        --num-cols: 6;
    }

    .nc-7-sm {
        --num-cols: 7;
    }

    .nc-8-sm {
        --num-cols: 8;
    }

    .nc-9-sm {
        --num-cols: 9;
    }

    .nc-10-sm {
        --num-cols: 10;
    }

    .nc-11-sm {
        --num-cols: 11;
    }

    .nc-12-sm {
        --num-cols: 12;
    }
}

md styles

grid/md/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-md) {
    .nc-1-md {
        --num-cols: 1;
    }

    .nc-2-md {
        --num-cols: 2;
    }

    .nc-3-md {
        --num-cols: 3;
    }

    .nc-4-md {
        --num-cols: 4;
    }

    .nc-5-md {
        --num-cols: 5;
    }

    .nc-6-md {
        --num-cols: 6;
    }

    .nc-7-md {
        --num-cols: 7;
    }

    .nc-8-md {
        --num-cols: 8;
    }

    .nc-9-md {
        --num-cols: 9;
    }

    .nc-10-md {
        --num-cols: 10;
    }

    .nc-11-md {
        --num-cols: 11;
    }

    .nc-12-md {
        --num-cols: 12;
    }
}

lg styles

grid/lg/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-lg) {
    .nc-1-lg {
        --num-cols: 1;
    }

    .nc-2-lg {
        --num-cols: 2;
    }

    .nc-3-lg {
        --num-cols: 3;
    }

    .nc-4-lg {
        --num-cols: 4;
    }

    .nc-5-lg {
        --num-cols: 5;
    }

    .nc-6-lg {
        --num-cols: 6;
    }

    .nc-7-lg {
        --num-cols: 7;
    }

    .nc-8-lg {
        --num-cols: 8;
    }

    .nc-9-lg {
        --num-cols: 9;
    }

    .nc-10-lg {
        --num-cols: 10;
    }

    .nc-11-lg {
        --num-cols: 11;
    }

    .nc-12-lg {
        --num-cols: 12;
    }
}

xl styles

grid/xl/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-xl) {
    .nc-1-xl {
        --num-cols: 1;
    }

    .nc-2-xl {
        --num-cols: 2;
    }

    .nc-3-xl {
        --num-cols: 3;
    }

    .nc-4-xl {
        --num-cols: 4;
    }

    .nc-5-xl {
        --num-cols: 5;
    }

    .nc-6-xl {
        --num-cols: 6;
    }

    .nc-7-xl {
        --num-cols: 7;
    }

    .nc-8-xl {
        --num-cols: 8;
    }

    .nc-9-xl {
        --num-cols: 9;
    }

    .nc-10-xl {
        --num-cols: 10;
    }

    .nc-11-xl {
        --num-cols: 11;
    }

    .nc-12-xl {
        --num-cols: 12;
    }
}

2xl styles

grid/2xl/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-2xl) {
    .nc-1-2xl {
        --num-cols: 1;
    }

    .nc-2-2xl {
        --num-cols: 2;
    }

    .nc-3-2xl {
        --num-cols: 3;
    }

    .nc-4-2xl {
        --num-cols: 4;
    }

    .nc-5-2xl {
        --num-cols: 5;
    }

    .nc-6-2xl {
        --num-cols: 6;
    }

    .nc-7-2xl {
        --num-cols: 7;
    }

    .nc-8-2xl {
        --num-cols: 8;
    }

    .nc-9-2xl {
        --num-cols: 9;
    }

    .nc-10-2xl {
        --num-cols: 10;
    }

    .nc-11-2xl {
        --num-cols: 11;
    }

    .nc-12-2xl {
        --num-cols: 12;
    }
}

3xl styles

grid/3xl/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-3xl) {
    .nc-1-3xl {
        --num-cols: 1;
    }

    .nc-2-3xl {
        --num-cols: 2;
    }

    .nc-3-3xl {
        --num-cols: 3;
    }

    .nc-4-3xl {
        --num-cols: 4;
    }

    .nc-5-3xl {
        --num-cols: 5;
    }

    .nc-6-3xl {
        --num-cols: 6;
    }

    .nc-7-3xl {
        --num-cols: 7;
    }

    .nc-8-3xl {
        --num-cols: 8;
    }

    .nc-9-3xl {
        --num-cols: 9;
    }

    .nc-10-3xl {
        --num-cols: 10;
    }

    .nc-11-3xl {
        --num-cols: 11;
    }

    .nc-12-3xl {
        --num-cols: 12;
    }
}

4xl styles

grid/4xl/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-4xl) {
    .nc-1-4xl {
        --num-cols: 1;
    }

    .nc-2-4xl {
        --num-cols: 2;
    }

    .nc-3-4xl {
        --num-cols: 3;
    }

    .nc-4-4xl {
        --num-cols: 4;
    }

    .nc-5-4xl {
        --num-cols: 5;
    }

    .nc-6-4xl {
        --num-cols: 6;
    }

    .nc-7-4xl {
        --num-cols: 7;
    }

    .nc-8-4xl {
        --num-cols: 8;
    }

    .nc-9-4xl {
        --num-cols: 9;
    }

    .nc-10-4xl {
        --num-cols: 10;
    }

    .nc-11-4xl {
        --num-cols: 11;
    }

    .nc-12-4xl {
        --num-cols: 12;
    }
}

5xl styles

grid/5xl/num-columns.css
/* =========================================================================== *\
    Number of columns
    This is intended to be used with the grid system to specify the number of
    columns in a grid to help with calculating the correct column widths when
    there is a gap value.
\* =========================================================================== */

@media (--m-5xl) {
    .nc-1-5xl {
        --num-cols: 1;
    }

    .nc-2-5xl {
        --num-cols: 2;
    }

    .nc-3-5xl {
        --num-cols: 3;
    }

    .nc-4-5xl {
        --num-cols: 4;
    }

    .nc-5-5xl {
        --num-cols: 5;
    }

    .nc-6-5xl {
        --num-cols: 6;
    }

    .nc-7-5xl {
        --num-cols: 7;
    }

    .nc-8-5xl {
        --num-cols: 8;
    }

    .nc-9-5xl {
        --num-cols: 9;
    }

    .nc-10-5xl {
        --num-cols: 10;
    }

    .nc-11-5xl {
        --num-cols: 11;
    }

    .nc-12-5xl {
        --num-cols: 12;
    }
}

Media query classes​

How to import into your CSS​

Source CSS​

Default styles​

3xs styles​

2xs styles​

xs styles​

sm styles​

md styles​

lg styles​

xl styles​

2xl styles​

3xl styles​

4xl styles​

5xl styles​