/*!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 + ':')); } }