Getting started

Amazium’s grid system is based on a 12-column layout by default, but it also supports alternate column modes for more flexible layout structures.

By default, grid items use a 12-column system where layout is defined using span utilities from .grid__item--span-1 to .grid__item--span-12.

One

Four

Three

Six

Three

Two

Eight

Two

Three

Nine

Four

Eight

Five

Seven

Six

Twelve

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

Tip: Grid columns should typically total 12 per row to maintain balanced layout alignment.

The grid system can be modified using column count modifiers to support different layout structures such as 6-column or 8-column grids.

One

Two

<div class="grid grid--6">
  <div class="grid__item grid__item--span-1">...</div>
  <div class="grid__item grid__item--span-5">...</div>
</div>

Use Case:

If your design only needs 6 columns instead of 12, this approach keeps things simpler and more structured.