Nested grids

Amazium supports nested grid structures, allowing grids to be placed inside grid items. This enables complex layouts without requiring additional CSS or custom grid definitions.

How it works:

Each .grid__item can contain its own .grid, which operates independently from its parent grid while maintaining the same grid system rules.

Nested grids are self-contained layout systems
Each grid maintains its own column structure
Spacing and alignment are inherited from the parent container unless overridden

Twelve

Four

Eight

Six

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

Use Case:

Nested grids are ideal for complex UI structures such as dashboards, forms, and content-heavy layouts where sections require their own internal column structure.