75 lines
2.3 KiB
SCSS
75 lines
2.3 KiB
SCSS
|
/*!markdown
|
||
|
|
|
||
|
|
---
|
||
|
|
title: Grid Template Columns
|
||
|
|
---
|
||
|
|
|
||
|
|
| Class | Properties |
|
||
|
|
| ----------- | ------------------------ |
|
||
|
|
| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-7 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) |
|
||
|
|
| grid-cols-none | grid-template-columns: none |
|
||
|
|
|
||
|
|
|
||
|
|
*/
|
||
|
|
@mixin make-grid-columns($prefix: '.') {
|
||
|
|
#{$prefix}grid-cols-1 {
|
||
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
#{$prefix}grid-cols-2 {
|
||
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
#{$prefix}grid-cols-3 {
|
||
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-4 {
|
||
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-5 {
|
||
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-6 {
|
||
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-7 {
|
||
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-8 {
|
||
|
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-9 {
|
||
|
|
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-10 {
|
||
|
|
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-11 {
|
||
|
|
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-12 {
|
||
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
#{$prefix}grid-cols-none {
|
||
|
|
grid-template-columns: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include make-grid-columns();
|
||
|
|
@each $deivce in map-keys($devices) {
|
||
|
|
@include media-device($deivce) {
|
||
|
|
@include make-grid-columns('.' + selector-escape($deivce + ':'));
|
||
|
|
}
|
||
|
|
}
|