Quasar Flex Grid Generator

Build a Quasar row and col layout by clicking, check it at every breakpoint, then copy the markup.

Container
Column spans
Out of 12 per line. An empty breakpoint inherits the span of the smaller one.
Item 1
Item 2
Item 3
Preview
md: from 1024px (tablets and laptops), simulated in this frame
Item 1
col-4
Item 2
col-4
Item 3
col-4
Markup 
<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>
Uses only core Quasar 2 classes, so no extra CSS or config is needed.

How to use the Flex Grid Generator

  1. Pick the container settings: direction, wrap, how items are justified along the main axis, how they align on the cross axis, and the gutter between them.
  2. Set each item's span per breakpoint. A span is out of 12, fill takes the space left and auto sizes the item to its content. Leave a breakpoint empty to keep the span from the smaller one.
  3. Switch the preview between xs, sm, md, lg and xl to see how the layout reflows on phones, tablets and desktops.
  4. Copy the markup and paste it into the template of any Vue component in your Quasar or Nuxt app, then replace the Item placeholders with your content.

Want whole sections instead of an empty grid? The Free Components on QuasarUI are built on the same row and col classes.

Frequently asked questions