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 is-8"><!-- 2/3 width --></div>
</div>

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>