Skip to content

Instantly share code, notes, and snippets.

@jensgro
Forked from wiegertschouten/grid.scss
Created February 21, 2023 14:08
Show Gist options
  • Save jensgro/62b16f34e93661c31b8b2fe790a39281 to your computer and use it in GitHub Desktop.
Save jensgro/62b16f34e93661c31b8b2fe790a39281 to your computer and use it in GitHub Desktop.
A very simple grid system built with SASS and CSS grid
$columns: 12;
$gap: 30px;
$breakpoints: (
xs: 480px,
sm: 768px,
md: 960px,
lg: 1170px,
xl: 1280px
);
@mixin create-selectors($breakpoint: null) {
$infix: if($breakpoint == null, '', '-#{$breakpoint}');
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
grid-column-end: span $i;
}
.col-offset#{$infix}-#{$i} {
grid-column-start: $i + 1;
}
.row#{$infix}-#{$i} {
grid-row-end: span $i;
}
.row-offset#{$infix}-#{$i} {
grid-row-start: $i + 1;
}
}
}
.grid {
display: grid;
grid-template-columns: repeat($columns, 1fr);
grid-gap: $gap;
gap: $gap;
}
@include create-selectors;
@each $breakpoint, $width in $breakpoints {
@media (min-width: $width) {
@include create-selectors($breakpoint);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment