Design System
Grid
Usage
Please refer to Boostrap / Grid system for detailed explanation.
variables/_grid.scss
// Grid breakpoints
$grid-breakpoints: (
xs: 0,
sm: 768px,
md: 1024px,
lg: 1440px,
xl: 1680px,
xxl: 1920px,
);
// Grid containers
$container-max-widths: (
md: calc(100% - (100% / 12 * 2) * 0.83333),
);
// Grid columns
$grid-columns: 12;
$grid-gutter-width: 0.5rem;
$grid-row-columns: 6;
// Container padding
$container-padding-x: $grid-gutter-width;
Example
1 / 12
11 / 12
2 / 12
10 / 12
3 / 12
9 / 12
4 / 12
8 / 12
5 / 12
7 / 12
6 / 12
6 / 12
7 / 12
5 / 12
8 / 12
4 / 12
9 / 12
3 / 12
10 / 12
2 / 12
11 / 12
1 / 12