Grid

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

Create responsive layouts of all shapes and sizes with this simple grid system.

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.

NameMax-WidthMin-Width
.container-5060rem10rem
.container-5566rem11rem
.container-6072rem12rem
.container-6578rem13rem
.container-7084rem14rem
.container-7590rem15rem
.container-8096rem16rem
.container-85102rem17rem
.container-90108rem18rem
.container-95114rem19rem
.container-100120rem20rem

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>