Flexbox gap introduction

[fairking]

Hi everyone,

I could not find so far any gap spacing classes available in Quasar. I wish we can introduce such.
So there are gap, column-gap and row-gap css properties. See the doc: https://developer.mozilla.org/en-US/docs/Web/CSS/gap

It would be nice to have something like:

• q-ga-[none|auto|xs|sm|md|lg|xl] - item gap
• q-gc-[none|auto|xs|sm|md|lg|xl] - column gap
• q-gr-[none|auto|xs|sm|md|lg|xl] - row gap

or

• q-ga-[none|auto|xs|sm|md|lg|xl] - item gap
• q-gx-[none|auto|xs|sm|md|lg|xl] - column gap
• q-gy-[none|auto|xs|sm|md|lg|xl] - row gap

[arbisyarifudin]

I think you can you q-gutter-[none|auto|xs|sm|md|lg|xl]

[stefanvanherwijnen]

Or q-col-gutter-[none|auto|xs|sm|md|lg|xl].

[fairking]

Thank you. I have found the following doc: https://quasar.dev/layout/grid/gutter

But so far as I can see it is using margin css, not gap one.

[AlexDaniel]

@rstoenescu elsewhere you were asking for the roadmap feedback. In 2026, it's extremely strange (and error-prone) to use negative margins for gaps. Of course, at the time it was groundbreaking, but nowadays the framework should come with helpers for using the native css gap, and the use of current approach should be discouraged.

[yusufkandemir]

It's been on our radar for quite some time, but it has not been documented or communicated properly. We will definitely consider this for Quasar v3. We might also add it to Quasar v2 since it's supplementary and not breaking. Thanks for the feedback.