grids

Butter Cake's grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Check the examples below

Offet classes available { .offset-(1-12) }

Examples

Sample 12 Column Grid.

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Grid Table

You can easily customize grid breakpoints inside src/vars/variable.scss

See how aspects of the Butter Cake grid system work across multiple devices with a handy table.

Extra small
<590px
Small
≥590px
Medium
≥790px
Large
≥1160px
Extra large
≥1260px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 20px (10px on each side of a column)
Nestable Yes

Auto Grid

Auto Column, use .column class.

One of three columns
One of three columns
One of three columns
<div class="row">
    <div class="column">
        One of three columns
    </div>
    <div class="column">
        One of three columns
    </div>
    <div class="column">
        One of three columns
    </div>
</div>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content