Flexible 12-Column Layout
A powerful, flexible, and responsive grid system built on modern CSS Grid and Flexbox technologies. Create consistent layouts across all devices with our 12-column system.
The Grid System is based on a 12-column layout with responsive breakpoints and flexible alignment options. It follows the ITCSS architecture and uses semantic class names for maximum clarity and maintainability.
Flexible column-based layouts
Responsive design with 6 breakpoints
Clear, predictable class names
Modern CSS technologies
WCAG 2.1 AA compliant
CSS custom properties and SCSS variables
The Container component provides responsive max-widths and centering for your content.
import { Container, Row, GridCol } from '@shohojdhara/atomix';
<Container>
<Row>
<GridCol md={6}>Content</GridCol>
<GridCol md={6}>Content</GridCol>
</Row>
</Container>The Row component wraps columns and provides negative margins to counteract column padding.
<Row>
<GridCol md={4}>Content</GridCol>
<GridCol md={4}>Content</GridCol>
<GridCol md={4}>Content</GridCol>
</Row>The GridCol component represents individual columns within a row with responsive breakpoints.
<Row>
<GridCol xs={12} sm={6} md={4} lg={3}>
Responsive column
</GridCol>
</Row>Atomix grid system includes 6 responsive breakpoints for mobile-first design:
Grid columns can be customized with various props for flexible layouts: