In the hope that you’ve previously read the Introduction to Flexbox theory, let’s get deeper into Gutters.
Gutter Quasar CSS classes offer an easy way to space out elements (especially in a Grid Row) one from each other at equal distance.
Types
There are two main types of gutters depending on your use-case: q-gutter-{size} and q-col-gutter-{size}. The first is to be used when the elements that you want to distance one from each other don’t use col-* or offset-* classes that specify a width, and the latter is to be used when they do have col-* or offset-* classes specifying a width.
TIP
Suffixes (-none, -xs, -sm, -md, -lg, -xl) do not refer to device screen size, but to the size of gutter between elements.
Classes “q-gutter-{size}”
WARNING
The q-gutter-* classes apply a negative top and left margins to the parent and a positive top and left margins to the children. Take this into account when working with the other Spacing classes so as to not to break the gutter’s css.
These classes are to be used when the direct children don’t have col-* or offset-* classes specifying a width.
There’s also the q-gutter-none class (equivalent to: no gutter applied) which wasn’t included in the example above.
Classes “q-col-gutter-{size}”
WARNING
The q-col-gutter-* classes apply a negative top and left margins to the parent and a positive top and left paddings to the children. Take this into account when working with the other Spacing classes so as to not to break the gutter’s css.
These classes are to be used when the direct children have col-* or offset-* classes that specify a width.
Pros, cons and how to workaround problems - “q-gutter-{size}” vs. “q-col-gutter-{size}”
Both set of classes have pros and cons.
WARNING
Because both q-gutter-* and q-col-gutter-* classes apply a negative top and left margins to the parent you should not apply styling targeting background, margin or border related properties on the parent.
Instead you need to wrap them in a container, apply the styling on the container, and add overflow-auto or row class on the container
TIP
The q-gutter-* classes do not change the internal dimensions of the children, so you can use background or border directly on children.
WARNING
The q-col-gutter-* classes do change the external dimensions of the children, so you cannot use col-* or offset-* classes specifying a width on children anymore.
WARNING
Because q-col-gutter-* classes apply a negative top and left padding to the children you should not apply styling targeting background, padding or border related properties on the children. Instead you need to put the styled element inside the child and apply the styling on that element.
Flex Grid Playground
To see the Flex in action, you can use the Flex Playground to interactively learn more.
Flex Playgroundlaunch