2. Grids

Grids

Grids provide structure and alignment in UI design, ensuring layouts are flexible and responsive. Amazium's grid system is built with SCSS, allowing for customization of parameters like grid width, column count, and gutter spacing.

Explore the grid system and its modifiers to create adaptive and structured designs.

1. Getting started

   Customize your grid with SCSS—set column count, gutter width, and overall grid width to fit your design needs.

2. Fluid / Responsive

   Make your layouts fully responsive by adding .grid--fluid, ensuring seamless scaling across all screen sizes.

3. Nested grids items

   Easily nest grids within grids without extra CSS. Structure complex layouts effortlessly.

4. Offsetting

   Use offset classes to add extra space between columns for a more balanced layout.

5. Ordering

   Reorder grid items dynamically with modifier classes—move columns to the first or last position.