Skip to content

Instantly share code, notes, and snippets.

@Sergioamjr
Last active December 10, 2018 14:56
Show Gist options
  • Save Sergioamjr/033803b02f602ec0d90193aca48d77bb to your computer and use it in GitHub Desktop.
Save Sergioamjr/033803b02f602ec0d90193aca48d77bb to your computer and use it in GitHub Desktop.
Sistema de Grid com SCSS
.container {
margin: 0 auto;
padding: 0 15px;
max-width: 1200px;
}
.grid {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
& > div {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
}
}
/* Função que gera as classes, recebe dois parâmetros;
o prefixo da classe e a quantidade de colunas. */
@mixin generateColumn($breakpoint, $until) {
@for $value from 1 through $until {
.#{$breakpoint}-#{$value}-#{$until} {
width: ((0% + $value / $until * 100));
}
}
}
@include generateColumn("xs", 12);
@media screen and (min-width: 768px) {
.grid {
@include generateColumn("sm", 12);
}
}
@media screen and (min-width: 992px) {
.grid {
@include generateColumn("md", 12);
}
}
@media screen and (min-width: 1200px) {
.grid {
@include generateColumn("lg", 12);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment