2. Grids
  3. Offsetting

Offsetting

Amazium provides offset utilities that allow grid items to be shifted horizontally within the active grid without the need for empty spacer elements.

How it works:

Offsets are applied using .grid__item--offset-* classes, which shift an element to the right by a defined number of grid columns.

Offsets respect the active grid system (12-column layout by default) and do not require manual empty columns or additional markup.

Item
Item
Item
Item
Item
<div class="grid grid--6">
  <div class="grid__item--8">...</div>
  <div class="grid__item--2 grid__item--start-10">...</div>
</div>

Breakdown:

  1. Offsets are based on the active grid column system
  2. They shift elements horizontally without requiring empty grid items
  3. They work in combination with .grid__item--span-*
  4. Offsets should align with the active grid mode (6, 8, or 12 columns)

Use Case:

Offsets are useful for:

  1. Centering content within a grid
  2. Creating intentional whitespace
  3. Building asymmetric layouts
  4. Fine-tuning alignment without restructuring markup
  1. Grids: Nesting
  2. Grids: Ordering