Grid

This provides styles for setting an element to be displayed as a grid with flexbox.

Most of the time you'll just use the main grid class and not one of the media query classes. However, they are there in case you want to only make an element a grid at a certain breakpoint.

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>

tip

If you are using a gutter class with your grid then you also need to use one of the grid number of columns clases to set how many columns are in the grid.

The grid base class has a class to go with each of the media query viewport sizes. For example:

grid-3xs
grid-2xs
grid-xs
grid-sm
grid-md
grid-lg
grid-xl
grid-1xl
grid-3xl
grid-4xl
grid-5xl

How to import into your CSS

Import this into your CSS with:

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

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS

Default styles

grid/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

.grid {
    --gap: 0px;
    --num-cols: 1;

    /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
    --col-width-adjust: calc((((var(--num-cols) - 1) / var(--num-cols)) * var(--gap)));

    display: flex;
    flex-wrap: wrap;
}

3xs styles

grid/3xs/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-3xs) {
    .grid-3xs {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

2xs styles

grid/2xs/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-2xs) {
    .grid-2xs {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

xs styles

grid/xs/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-xs) {
    .grid-xs {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

sm styles

grid/sm/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-sm) {
    .grid-sm {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

md styles

grid/md/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-md) {
    .grid-md {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

lg styles

grid/lg/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-lg) {
    .grid-lg {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

xl styles

grid/xl/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-xl) {
    .grid-xl {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

2xl styles

grid/2xl/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-2xl) {
    .grid-2xl {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

3xl styles

grid/3xl/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-3xl) {
    .grid-3xl {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

4xl styles

grid/4xl/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-4xl) {
    .grid-4xl {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

5xl styles

grid/5xl/grid.css
/* =========================================================================== *\
    Grid utilities
\* =========================================================================== */

@media (--m-5xl) {
    .grid-5xl {
        --gap: 0px;
        --num-cols: 1;

        /*  Adjust the width of the columns to account for the gap between them.
        This is only needed when using the "col-" classes because they set a percentage width.
        In order to do this properly you need to know the number of columns in the grid.
        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
        Based on https://stackoverflow.com/a/76429435.
    */
        --col-width-adjust: calc(
            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
        );

        display: flex;
        flex-wrap: wrap;
    }
}

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​