Grid

Create responsive layouts easily with Luxa’s straightforward grid system.

Containers

Containers fix element width to breakpoints and encapsulate content.

• Width ranges from 50% to 100% of viewport (in 5% increments);
• Each has minimum and maximum limits for optimal readability.

Example:

<div class="container-80">
  <!-- Content -->
</div>

In the example above, container-80 will have a maximum width of 80% of the viewport, a max size of 96rem, and a minimum size of 16rem.

Rows

Rows group columns and span 100% of container width.

• Use flex display for horizontal column organization;
• Default gap: var(--gap) (1.125em);
• Remove gap with is-gapless class.

Example:

<div class="container-75">
  <div class="row">
    <div class="col"><!-- Content --></div>
    <div class="col"><!-- Content --></div>
  </div>
</div>

Columns

Columns are flexible and adapt to row and container size.

• Use is-X classes to set column width (X = 1 to 12).

Example:

<div class="row">
  <div class="col is-4"><!-- 1/3 width --></div>
  <div class="col"><!-- 2/3 width --></div>
</div>

Important note about is-X modifiers:

When using modifiers to define column widths, apply them to only a few elements in each row. These modifiers make the column occupy the total available width without considering the gap (spacing) between columns.

✅ Recommended (using only one is-X):

<div class="row">
  <div class="col is-4"><!-- 1/3 width --></div>
  <div class="col"><!-- remaining 2/3 --></div>
</div>

❌ Not recommended (using multiple is-X):

<div class="row">
  <div class="col is-4"><!-- 1/3 width --></div>
  <div class="col is-8"><!-- 2/3 width --></div>
</div>

In the second example, since both columns have is-X modifiers, they will try to occupy their defined widths (4/12 + 8/12 = 12/12) without considering the gap between them, which can cause layout breaks. Therefore, it is better to let the last column naturally adjust to the remaining space.

Responsive behavior

• Below 80rem:
  • Containers adjust max-width;
  • Rows change to column direction;
  • Columns take full width.

This grid system provides a flexible foundation for creating responsive layouts of various complexities.

Reproduce in Tailwind CSS

<div class="container mx-auto">
  <div class="flex flex-col md:flex-row">
    <div class="block basis-0 flex-grow flex-shrink">
      <!-- Content -->
    </div>
    <div class="block basis-0 flex-grow flex-shrink">
      <!-- Content -->
    </div>
  </div>
</div>

Getting Help

Need help? Open an issue. I'll be happy to help. 🎈