Fluid / Responsive

The Amazium grid system supports a fluid mode that allows layouts to adapt to the full width of their container instead of using a fixed maximum width.

How it works:

The .grid--fluid modifier removes the fixed container constraint, allowing the grid to expand to 100% width of its parent element.
Columns remain based on the same span system but scale dynamically with the available viewport width.

Four

Three

Six

Three

Two

Eight

Two

Twelve

<div class="grid grid--fluid">
  <div class="grid__item grid__item--span-4">...</div>
  <div class="grid__item grid__item--span-6">...</div>
</div>

Use Case:

Use .grid--fluid for layouts that need to stretch across the full width of the viewport or parent container, particularly in dashboards, marketing pages, or data-heavy interfaces.