Container
Containers are the most basic element for using our default grid system. Container max-width changes at each breakpoint defined in the theme to the max-width defined in each breakpoint. You can edit grid variables by using theme.
You should avoid using padding, margin, width & max-width to container.
Avail Props
Default Value
Show More
// Containerimport { Div, Container } from "atomize";ReactDOM.render(<Container>{/* your Content goes here */}</Container>, mountNode);
Row & Col
Our Grid system uses <Row /> and <Col /> to layout and align content. It’s built with flexbox and is fully responsive. You can edit grid variables by using theme.
This is 5 of 12
This is 7 of 12
Variable width content
3 of 12
Variable width content
4 of 12
Changing Grid Variables
3 of 8
5 of 8
Row Props
Default Value
Show More
Column Props
Default Value
Show More
// Basic Column Structureimport { Row, Col, Div } from "atomize";ReactDOM.render(<Row><Col size="5"><Div p="1rem" bg="warning500">This is 5 of 12</Div></Col><Col size="7"><Div p="1rem" bg="warning500">This is 7 of 12</Div></Col></Row>, mountNode);