Grid

Use Luxa's powerful, straightforward grid system to create responsive layouts of all shapes and sizes.

Containers

Containers fix the element’s width to the breakpoint and encapsulate its content, including rows and columns.

Each container’s width has a minimum and maximum limit to ensure optimal readability and maintain content structure; this width is a variable percentage between 50% and 100% (in 5% increments) based on the viewport’s width.

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

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.

Name	Max-Width	Min-Width
.container-50	60rem	10rem
.container-55	66rem	11rem
.container-60	72rem	12rem
.container-65	78rem	13rem
.container-70	84rem	14rem
.container-75	90rem	15rem
.container-80	96rem	16rem
.container-85	102rem	17rem
.container-90	108rem	18rem
.container-95	114rem	19rem
.container-100	120rem	20rem

Rows

Rows group columns and span 100% of the container’s width. They use a flex display to organize columns horizontally.

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

In the example above, the columns occupy 50% of the row within a container and 75% of the viewport’s width.

Rows use the row direction by default, switch to the column on smaller viewports, and centre-align content horizontally and vertically. They use var(--gap) as the default gap, which equals 1.125em, and applying is-gapless removes this gap.

Columns

Columns are flexible, responsive, and adapt to the size of the row and container.

<div class="row">
  <div class="col is-4">
    <!-- ... -->
  </div>
  <div class="col is-8">
    <!-- ... -->
  </div>
</div>

In the example above, the first column takes up 1/3 of the row (4/12) and the second 2/3 (8/12).

Responsive Behavior

Below 80rem, containers adjust max-width, rows change item direction to column, and columns assume full line width. This ensures readability on mobile devices.

Reproduce in Tailwind CSS

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