Quasar Flex Grid Generator: Build row and col Layouts

The Quasar flex grid is 12 columns, mobile-first, and easy to get slightly wrong. A col-md-6 that should have been col-sm-6, a justify-md-center that does nothing, a column with no height. Today there is a free tool for it: the Flex & Grid Class Generator. You click a layout together, check it at every breakpoint, and copy the row / col-* markup. This post shows how to use it, then explains the rules behind the classes it writes, so you can read and fix the markup by hand too.

If you are still setting up the app shell (header, drawer, page container), start with the Quasar layout system guide. The grid lives inside the page.

Using the Flex & Grid Class Generator

The tool has three panels: settings on the left, a preview and the markup on the right.

1. Container. Pick a direction (row, row reverse, column, column reverse), a wrap mode, how items are justified along the main axis, how they align on the cross axis, and a gutter size.
2. Column spans. Each item (up to 12) gets a span per breakpoint: xs, sm, md, lg and xl. A span is a number from 1 to 12, fill (the col class) or auto (col-auto). Leave a breakpoint empty and it inherits the span of the smaller one.
3. Preview. Switch between xs and xl to see the layout at each breakpoint, with the classes that apply there printed on every item.
4. Markup. Copy the HTML and paste it into the template of any Vue component in a Quasar CLI or Nuxt app.

The default layout is the classic responsive card row. It produces this:

<div class="row q-col-gutter-md">
  <div class="col-12 col-sm-6 col-md-4">
    <div class="q-pa-md bg-grey-3 rounded-borders">Item 1</div>
  </div>
  <div class="col-12 col-sm-6 col-md-4">
    <div class="q-pa-md bg-grey-3 rounded-borders">Item 2</div>
  </div>
  <div class="col-12 col-sm-6 col-md-4">
    <div class="q-pa-md bg-grey-3 rounded-borders">Item 3</div>
  </div>
</div>

Three cards stack on a phone, sit two per line on a tablet, and three per line from 1024px up. The markup uses only core Quasar classes, so it needs no extra CSS or config. The tool runs in your browser and needs no account.

How the Quasar flex grid works

Every Quasar flex grid has two parts: a container with a direction class, and children with size classes. The direction class is required. Without row or column on the parent, the col-* classes on the children do nothing.

Container classes

Rows and columns wrap by default, so there is no need to write wrap. The tool leaves it out of the markup.

Quasar row col classes

Quasar uses a 12-point system for the children of a row:

• col-1 to col-12 set the width to that many twelfths. col-6 is 50%, col-4 is 33.33%.
• col fills the space that is left and shrinks if it has to.
• col-auto takes only the width its content needs.
• col-grow takes at least its content width and grows into free space; col-shrink takes at most its content width.
• offset-1 to offset-12 push a child right by that many twelfths.

Wrapping is what makes this a grid. When the spans on one line add up to more than 12, the next child moves to a new line. Two col-8 children don't fit (8 + 8 = 16), so the second one wraps. You don't have to fill all 12 points either: col-3 plus col-6 leaves a quarter of the line empty.

Quasar responsive columns: breakpoints

Any col-*, col-auto or offset-* class can take a breakpoint token in the middle: col-md-6, col-lg-auto, offset-sm-2. These are the breakpoints in Quasar 2.35.2:

The rule is mobile-first: a class applies from its breakpoint up, until a larger breakpoint overrides it. So col-12 col-md-6 means "full width, and half width from 1024px". It does not mean "half width only on medium screens".

Two consequences show up in the tool's output:

• xs is written without a token. col-12 and col-xs-12 mean the same thing, so the tool writes the shorter one.
• Repeated spans are dropped. If an item is 6 at sm, md and lg, the markup says col-sm-6 once. Writing col-md-6 col-lg-6 as well changes nothing.

A common bug is a missing small breakpoint. col-md-4 alone means "auto width on phones and tablets, a third from 1024px". If you wanted full width on phones, add col-12 in front.

Alignment on the main and cross axis

The container decides how children line up:

• justify-start, justify-center, justify-end, justify-between, justify-around and justify-evenly work along the main axis (horizontal in a row).
• items-start, items-center, items-end, items-baseline and items-stretch work on the cross axis (vertical in a row).

In a column the axes swap, so justify-center centers vertically and items-center centers horizontally. That is why the tool labels the two selects "main axis" and "cross axis" instead of "horizontal" and "vertical".

Justify classes only have a visible effect when there is space left on the line. Three col-4 children fill the row, so justify-center does nothing. Three col-3 children leave a quarter free, and now it matters.

Why there is no justify-md-center

Breakpoint versions of the alignment classes, like justify-md-center or items-lg-end, are not part of core Quasar. They come from the flex addon, which you switch on with framework: { cssAddon: true } in the Quasar CLI config or by importing quasar/src/css/flex-addon.sass. The Quasar docs warn that it adds noticeably to your CSS size. The tool only writes classes that work without it, so its markup never silently does nothing.

Column layouts need a height

Switch the direction to column and the tool shows a height field. In a column, col-4 means a third of the container's height, not its width. A column with no fixed height is only as tall as its content, so the spans have nothing to divide. The generated markup puts the height you choose in an inline style:

<div class="column" style="height: 300px">
  <div class="col-auto">
    <div class="q-pa-md bg-grey-3 rounded-borders">Item 1</div>
  </div>
  <div class="col">
    <div class="q-pa-md bg-grey-3 rounded-borders">Item 2</div>
  </div>
</div>

A col-auto header with a col body that fills the rest is the most common use: a card or panel with a fixed height and a scrolling middle.

Three layouts to try in the generator

Sidebar and content. Two items: col-12 col-md-3 and col-12 col-md-9. They stack on a phone and sit side by side from 1024px.

Toolbar row. Three items: col-auto, col and col-auto, with items-center on the container. A title, a flexible middle and a button that stays at its natural size.

Dashboard stats. Four items at col-12 col-sm-6 col-lg-3. One per line on phones, two by two on tablets and laptops, four in a line from 1440px.

Build each one, flip the preview from xs to xl, and watch the classes on each item change.

Gutters: why the markup has an inner div

The tool's gutter setting writes q-col-gutter-* on the container. Those classes add padding to each child, so the space you see sits inside the col-* element. Anything that paints, like a background, a border or a card, must go on an inner element, or it covers the gutter. That is why every item in the markup is a col-* div wrapping a content div. Put your q-card where the placeholder div is.

Common questions about Quasar row and col

Does the generator work for Nuxt? Yes. The classes come from Quasar's CSS, which loads the same way in a Nuxt app with the Quasar module as in a Quasar CLI app.

Why do my items stack when I expected them side by side? Their spans add up to more than 12 at that screen width. Check the smallest breakpoint you set: anything without a larger token keeps applying.

Should I use col or col-6 for two equal items? Both look the same with two items. col keeps them equal when you add a third, and col-6 wraps the third to a new line. Pick the behavior you want.

Can I use these classes on Quasar components? Yes, class="col-6" works on a q-card or q-input as on a div, as long as its parent has row or column.

Next step

Open the Flex & Grid Class Generator, set the spans for the layout you are building, and check it at xs and xl before you copy it. It is free, it runs in the browser, and it only writes classes that work in a plain Quasar 2 app.