Quasar Grid Layout     

Back in the ol’ days web developers used HTML tables to style their web pages. Then came along powerful CSS features. Latest in the arena entered Flexbox.

Quasar provides lots of CSS classes to help you deal easily with managing a layout. Long story short, think of it like operating with rows and columns with many options at hand.

Background on Flexbox

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Getting Started

Quasar Grid Layout CSS classes apply to either the Container (Parent) or the Container’s items (Children).

Flexbox Container
Flexbox Items

Parent Classes

Setting Direction

One of the following CSS classes is mandatory for the parent in order for the children ones (described in next sections) to have any effect.

Flexbox Direction

Class NameDescription
flexdisplay is set to flex
rowFlex row
row inlineInline Flex row
columnFlex column
column inlineInline Flex column
reverse-rowFlex row with flex-direction set to row-reverse
reverse-columnFlex column with flex-direction set to column-reverse

Example:

<div class="row">
<div>First column</div>
<div>Second column</div>
<div>Third column</div>
</div>

Wrap

You can also wrap content. Use wrap or reverse-wrap classes. By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.

Flexbox Direction

If you explicitly do not want to wrap, use no-wrap class.

Class NameDescription
wrapWrap if necessary
no-wrapDo NOT wrap even if necessary
reverse-wrapWrap backwards if necessary

Alignment

For alignment along the main axis, use classes below. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Flexbox Justify Content

For alignment perpendicular to the main axis, use classes below. This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the horizontal-* version for the cross-axis (perpendicular to the main-axis).

Flexbox Items Align

The next classes align a flex container’s lines within when there is extra space in the cross-axis, similar to how horizontal-* aligns individual items within the main-axis.

Flexbox Content Align

Gutters

Class NameDescription
small-gutterSmall gutter between cells
medium-gutter or gutterDefault gutter between cells
big-gutterBig gutter between cells
large-gutterLarge gutter between cells

Example:

<div class="row large-gutter">
<div>First column</div>
<div>Second column</div>
</div>

Children Classes

Order

You can set the order by using order-i classes, where i is between 1-10. By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. If you need more granularity, use order CSS property and assign the desired value.

Flexbox Order

Example:

<div class="row">
<div class="order-2">Second column</div>
<div class="order-3">Third column</div>
<div class="order-1">First column</div>
</div>

Size

The width of a column can be set as width-XofY (where Y is 1 to 5 and X is 1 to Y).
It’s a wrapper over flex 0 1 X%.

Example: width-1of3 for a 33% width for the cell. sm-width-1of3 when on a narrow screen only.

<div class="row">
<div class="width-2of3">2/3</div>
<div class="width-1of5">1/5</div>
<div class="auto">auto</div>
<div class="auto">auto</div>
</div>

CSS class auto makes the cell expand to the remaining unused width.

There’s also the possible to offset a cell with offset-XofY. Example: ‘offset-1of3’, sm-offset-1of3 (when on narrow screen only), offset-0 (for no offset, useful when using different offsets based on screen size).

Grow

An item can grow if it’s enough space available by using grow-i classes, where i is between 1-10. This defines the ability for a flex item to grow if necessary. It accepts a unit-less value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have grow-1 class, the remaining space in the container will be distributed equally to all children. If one of the children has grow-2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Flexbox Grow

Shrink

An item can shrink if necessary by using shrink-i classes, where i is between 1-10.

Self Alignment

An item can override the aligned specified on parent. This allows alignment to be overridden for individual flex items. Please see the Alignment explanation from Parent Classes to understand the available values (self-start, self-center, self-baseline, self-end, self-stretch).

Flexbox Grow

Visibility

An item can be displayed or not based on the width of the screen. The following list displays prefixes (can be used as standalone too!) that you can use for all of the above CSS classes.

PrefixDescription
smDisplay only on small windows
mdDisplay only on medium-sized windows
bgDisplay only on big windows
lgDisplay only on large windows
lt-mdDisplay only on lower than medium windows
lt-bgDisplay only on lower than big windows
lt-lgDisplay only on lower than large windows
gt-smDisplay only on greater than small windows
gt-mdDisplay only on greater than medium windows
gt-bgDisplay only on greater than big windows
<!-- Also see the demo on this page and try a mobile and desktop view -->
<div class="row gutter">
<div class="sm">SM</div>
<div class="md">MD</div>
<div class="bg">BG</div>
<div class="lg">LG</div>
<div class="lt-md">lt-MD</div>
<div class="lt-bg">lt-BG</div>
<div class="lt-lg">lt-LG</div>
<div class="gt-sm">gt-SM</div>
<div class="gt-md">gt-MD</div>
<div class="gt-bg">gt-BG</div>
</div>

One more example:

<!-- Displayed as column on small windows and as rows the rest of the time -->
<div class="row gutter sm-column"> <<<<<<<<<<<<<<
<div class="width-2of3"><div>2/3</div></div>
<div class="width-1of5"><div>1/5</div></div>
<div class="auto"><div>auto</div></div>
<div class="auto"><div>auto</div></div>
</div>

Prefixes also work with order-i, shrink-i, width-XofY, offset-XofY, on gutters and so on.

What does small, medium, big or large windows mean? Check CSS > Visibility page to see thresholds on window width.