Different gutter widths by breakpoint/media query

[cphoover]

Perhaps this is a dumb question, but I couldn't find the answer after a precursory look through the docs.

Is there a way to change the global gutter width at specific breakpoints? For e.g. make it a thinner sized gutter on mobile than on desktop.

TY

[peterramsing]

I've had this question a few times. Presently, there isn't a way to change the global gutter from mobile to desktop.

---

Maybe this is something I should look into adding. 🤔

[cphoover]

@peterramsing If you can point me in the right direction. I might be able to take a stab at it when I have some time.

[cphoover]

I would like to use Lost, but I can already can guarantee the designers on our team will adjust the gutter width on mobile, and I'm not sure where to go from there.

[olegdenisov]

how can I change gutter for different viewport globally?

[taltmann42]

For a workaround until this may be implemented, you could declare mixins that handle the different gutter sizes. Declare global variables for gutter sizes and create the mixins according to your breakpoints:

$mobile-gutter: 10px;
$desktop-gutter: 20px;

@mixin mobile-column($ratio, $cycle: 0) {
  lost-column: $ratio $cycle $mobile-gutter;
}

@mixin desktop-column($ratio, $cycle: 0) {
  @media (min-width: 800px) {
    lost-column: $ratio $desktop-gutter; 
  }
}

This is for a mobile-first approach, you can also adjust the media queries or use multiple mixins like column-only-tablet or the like.

Using these would look like this:

.some-element {
  @include mobile-column(8/12, 1);
  @include desktop-column(4/12, 2);
}