Layout

Columns

Use .quanta-columns to create horizontal layouts using a flex-based grid. Combine it with .col-* utility classes to define column widths based on a 12-column grid.

<div class="quanta-columns">
  <div class="col-6">Column 1</div>
  <div class="col-6">Column 2</div>
</div>

Column 1

Column 2

Fixed Width Columns

Set column width using .col-1 to .col-12 (1–12 of 12 columns):

<div class="quanta-columns">
  <div class="col-4">4/12</div>
  <div class="col-8">8/12</div>
</div>

4/12

8/12

Responsive Columns

Use .sm-col-*, .md-col-*, etc., to adjust column widths by screen size:

<div class="quanta-columns">
  <div class="col-12 md-col-6">Responsive Left</div>
  <div class="col-12 md-col-6">Responsive Right</div>
</div>

Responsive Left

Responsive Right

Auto Columns

Use .quanta-columns-auto for equal-width columns that auto-fit:

<div class="quanta-columns-auto">
  <div class="col">Auto 1</div>
  <div class="col">Auto 2</div>
  <div class="col">Auto 3</div>
</div>

Auto 1

Auto 2

Auto 3

Gap Utilities

Control spacing between columns with .column-gap-2, .column-gap-4, etc.:

<div class="quanta-columns column-gap-4">
  <div class="col-6">Gap 1</div>
  <div class="col-6">Gap 2</div>
</div>

Gap 1

Gap 2