Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS grid system with CSS grid
$screen-sizes: (
xxl: 1920px,
xl: 1440px,
l: 1360px,
ml: 1280px,
m: 768px,
s: 576px
);
$col-count: 24;
@for $col from 1 through $col-count {
.col--span\:#{$col} {
grid-column-start: span $col;
@for $i from 0 through ($col-count - 1) {
&.col--offset\:#{$i} {
grid-column: ($i + 1) / span $col;
}
}
&.col--center {
grid-column: (($col-count - $col) / 2 + 1) / span $col;
}
}
}
@each $label, $size in $screen-sizes {
@for $col from 1 through $col-count {
@media (max-width: $size) {
.#{$label}-col--span\:#{$col} {
grid-column-start: span $col;
@for $i from 0 through ($col-count - 1) {
&.#{$label}-col--offset\:#{$i} {
grid-column: ($i + 1) / span $col;
}
}
&.#{$label}-col--center {
grid-column: (($col-count - $col) / 2 + 1) / span $col;
}
}
}
}
}
.grid {
display: grid;
grid-template-columns: repeat($col-count, 1fr);
grid-column-gap: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.