_grid.scss
unknown
scss
4 years ago
1.6 kB
5
Indexable
$cols: 12; $gutter: 16px; // khoảng giữa 2 item trong ht lưới .row { // @for - from 1 to 12: --> 1 den 11 // @for - from 1 through 12: --> 1 den 12 display: flex; flex-wrap: wrap; margin: -$gutter / 2; overflow: hidden; @for $i from 1 through $cols { @media (max-width: 576px) { .col-xs-#{$i} { padding: $gutter / 2; width: (100% / $cols) * $i; } } } @for $i from 1 through $cols { @media (max-width: 768px) { .col-sm-#{$i} { padding: $gutter / 2; width: (100% / $cols) * $i; } } } @for $i from 1 through $cols { @media (max-width: 992px) { .col-md-#{$i} { padding: $gutter / 2; width: (100% / $cols) * $i; } } } @for $i from 1 through $cols { @media (max-width: 1140px) { .col-lg-#{$i} { padding: $gutter / 2; width: (100% / $cols) * $i; } } } @for $i from 1 through $cols { @media (min-width: 1140px) { .col-xl-#{$i} { padding: $gutter / 2; width: (100% / $cols) * $i; } } } // // col-xs-12 col-sm-3 col-md-6 col-lg-4 // .col-xs-1 // .col-xs-2 // ... // .col-xs-12 // // .col-sm-1 // .col-sm-2 // ... // .col-sm-12 // // .col-md-1 // .col-md-2 // ... // .col-md-12 // // .col-lg-1 // .col-lg-2 // ... // .col-lg-12 // // .col-xl-1 // .col-xl-2 // ... // .col-xl-12 // }
Editor is loading...