41 lines
650 B
SCSS
41 lines
650 B
SCSS
.grid {
|
|
--gutter: 1rem;
|
|
width: 100%;
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
margin-right: calc(var(--gutter) / -2);
|
|
margin-left: calc(var(--gutter) / -2);
|
|
|
|
& > * {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
|
|
padding-right: calc(var(--gutter) / 2);
|
|
padding-left: calc(var(--gutter) / 2);
|
|
margin-top: var(--gutter);
|
|
}
|
|
|
|
.col {
|
|
flex: 1 0 0%;
|
|
}
|
|
|
|
@for $i from 1 through 6 {
|
|
.col-#{$i} {
|
|
flex: 1 0 auto;
|
|
width: percentage($i / 6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid .row {
|
|
display: block;
|
|
}
|
|
}
|