-
-
Save wiegertschouten/443f7e061d1fc656b229ac4b5b0faece to your computer and use it in GitHub Desktop.
$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); | |
} | |
} |
@nguyenvu you can create a row like this:
<div class="grid">
<div class="col-12 col-md-8">I'm a column 2/3 wide</div>
<div class="col-12 col-md-4">I'm a column 1/3 wide</div>
</div>
In this way, you create a row of which the children stack on top of one another on mobile devices, and become columns on desktop computers.
Does that help?
Thank you! I keep playing with this and trying to figure out to use .row-l-*
but yes, it helps a lot :D
Very simple and good idea. But unfortunately at a browser width below 337px (Smallest iPhone: 320px) the window becomes scrollable, because the content does not shrink. It is related to the gap. Unfortunately I still have too little knowledge to fix this grid problem. @wiegertschouten do you have an idea or someone else?
This is my current markup:
<div class="grid">
<div class="col-12">I'm a column</div>
</div>
@arsors You are right, it's related to the gap. That is a bit of a shortcoming of this idea. You can solve it by adding the following after the initial code:
@media (max-width: 400px) {
.grid {
grid-gap: 20px;
gap: 20px;
}
}
This makes the gap somewhat smaller on devices below 400px.
@wiegertschouten Thank you for the answer. It seems to be a general problem with grids and gaps. I have already solved it like your idea. Alternatively you could use: gap: min($gap, 5%);
, but this results in a strange spacing.
Edit: After a bit of testing i found out that gap: clamp(15px, 2vw, $gap);
is working pretty ok (not perfect).
Thank you for sharing, do you have any idea how to implement row with this grid?