Skip to content

Latest commit

 

History

History
31 lines (25 loc) · 1.59 KB

columns.md

File metadata and controls

31 lines (25 loc) · 1.59 KB
Raw

Flex columns

Class Properties
.col-1 flex: 0 0 8,3333333333%;
padding-left: 20px;
padding-right: 20px;
.col-2 flex: 0 0 16,6666666667%;
padding-left: 20px;
padding-right: 20px;
.col-3 flex: 0 0 25%;
padding-left: 20px;
padding-right: 20px;
.col-4 flex: 0 0 33,3333333333%;
padding-left: 20px;
padding-right: 20px;
.col-5 flex: 0 0 41,6666666667%;
padding-left: 20px;
padding-right: 20px;
.col-6 flex: 0 0 50%;
padding-left: 20px;
padding-right: 20px;
.col-7 flex: 0 0 58,3333333333%;
padding-left: 20px;
padding-right: 20px;
.col-8 flex: 0 0 66,6666666667%;
padding-left: 20px;
padding-right: 20px;
.col-9 flex: 0 0 75%;
padding-left: 20px;
padding-right: 20px;
.col-10 flex: 0 0 83,3333333333%;
padding-left: 20px;
padding-right: 20px;
.col-11 flex: 0 0 91,6666666667%;
padding-left: 20px;
padding-right: 20px;
.col-12 flex: 0 0 100%;
padding-left: 20px;
padding-right: 20px;

Install separately

@import '~scssfold/src/modules/flex/columns';

Customizing

Override the following variable before including the module. Each key is used for the class name, and the value is used for the css property.

$scssfold-columns: 12; // Number of columns
$scssfold-grid-gutter: 20px; // Grid gutter