Layout

Responsive grid components which provides uniformity across different devices and screen sizes.

The Axis layout system used Grid based layout that consists of following:

• Container

• Row

• Column

Layout in Axis is responsive that means, we don't need to have fixed vertical Columns, we simply use the Column inside the Row and our content automatically gets evenly places without breaking the responsiveness by auto adjusting as we place more column.

Every Column has minimum width of 200px to ensure your content shifts to the next row if there is not enough space on mobile

• Containers are used as a wrapper to your content this should remain the same across your website for consistency and uniformity.

• Row should have Container as a parent and they are used as a wrapper to columns

• Columns will auto adjust your content by placing overflowing content to next row

• Each column uses equal width in row unless specified, i.e two immediate columns of row will have equal width equal to the width of row / number of columns

• Use breakpoint props in Column to place your content based on different screen sizes