CSS (SCSS) grid, base on CSS grid layout with @supports fallback to flexbox (partial support)
Get this project in Github1
2
3
1
2
3
4
5
6
7
8
9
10
4
.grid
classBy default
.grid
will have the maximum of columns set in
scss/variables/_grid.scss => $grid-columns. By default the grid have 12 columns
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.has-cols-{breakpoint}-{number of columns}
classThe number of columns of the grid can be changed using the class
.has-cols-{breakpoint}-{number of columns}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.has-cols-1
1
.has-cols-2
1
2
.has-cols-3
1
2
3
.has-cols-4
1
2
3
4
.has-cols-5
1
2
3
4
5
.has-cols-6
1
2
3
4
5
6
.has-cols-7
1
2
3
4
5
6
7
etc. up to $grid-columns (12)
.has-grid-gap-{breakpoint}-{spacer}
classThe spacing between grid items can be changed using the class
.has-cols-{breakpoint}-{number of columns}
1
2
3
4
5
.has-grid-gap-0
1
2
3
4
5
6
.has-grid-gap-1
1
2
3
4
5
6
.has-grid-gap-2
1
2
3
4
5
6
.has-grid-gap-3
1
2
3
4
5
6
.has-grid-gap-4
1
2
3
4
5
6
.has-grid-gap-5
1
2
3
4
5
6
.has-grid-gap-6
1
2
3
4
5
6
.has-grid-gap-7
1
2
3
4
5
6
.has-grid-gap-8
1
2
3
4
5
6
.has-grid-gap-9
1
2
3
4
5
6
.has-col-{breakpoint}-{number of columns}
class
/!\ No fallback
The number of columns of a grid item can be changed using the class
.has-col-{breakpoint}-{number of columns}
1
2
3
4
5
6
7
8
9
10
.has-row-{breakpoint}-{number of rows}
class
/!\ No fallback
The number of row of a grid item can be changed using the class
.has-row-{breakpoint}-{number of columns}
.
grid-template-rows
. The word all can be used the item will be full width in this case
only if the number of rows is set.1
2
3
4
5
6
7
8
9
10
.is-dense
class
/!\ No fallback
.is-dense
with
.grid
will make the grid dense.
Dense: Is a keyword specifying that the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
For example, here is the example from .has-col-{breakpoint}-{number of columns} if .is-dense:
1
2
3
4
5
6
7
8
9
10
.container
ClassAtomic Bulldog grid comes with a container class to get even spacing in your project. This all page is in a container.
Atomic Bulldog Grid is fully customizable:
$use-css-var
can be changed to suit you need in atomic-bulldog-grid.scss, atomic-bulldog-grid-fallback.scss, atomic-bulldog-grid-fallback-ie.scss.$breakpoints
manage all the breakpoints in the project you can add, remove, rename so this grid can fit your needs.$grid-columns
to the maximum of columns you need.$spacers
manage all the spacing in the project you can add, remove, rename so this grid can fit your needs.$container-sizes
manage all the container sizes, it is linked to the $breakpoints
map if you edit this one remember to change the container map as well.