Grid system

The Atlas Grid system is a fully responsive, robust, 12 column layout system with five default breakpoints. It’s fundamental to everything we design, and the geometric foundation of all high-level layouts.

How it works

Atlas’s grid system uses a series of containers, rows, and columns to layout content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

Live Editor

function GridExample() { const item = <div style={{ background: 'lightblue', height: '30px' }}></div>; return ( <div> <Container> <Row> <Column xs={12} lg={4}> {item} </Column> <Column xs={12} lg={4}> {item} </Column> <Column xs={12} lg={4}> {item} </Column> </Row> </Container> </div> ); }

function GridExample() {
  const item = <div style={{ background: 'lightblue', height: '30px' }}></div>;
  return (
    <div>
      <Container>
        <Row>
          <Column xs={12} lg={4}>
            {item}
          </Column>
          <Column xs={12} lg={4}>
            {item}
          </Column>
          <Column xs={12} lg={4}>
            {item}
          </Column>
        </Row>
      </Container>
    </div>
  );
}

Result

Loading...

The above example creates three columns, where for resolutions starting on xs will span to 12 columns, and for resolutions stating on lg, will span to 4

Container

Container component provides a means to center and horizontally pad your site’s contents. By default container will take a fixed width of 1080px when min width of 1200px is reached

Props

Name	Type	Default
fluid Makes the container take the entire available width.	boolean	—
noMargin Removes the margin from the container.	boolean	—
children The content of the container.	ReactNode	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Row

Rows are wrappers for columns.

Props

Name	Type	Default
children The content of the row.	ReactNode	—
spacing spacing is the gap between column in px	number	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Column

• In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
• Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
• Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
• Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., sm={6} applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
• if you don't pass any breakpoint the column will take equal space on every resolution

Setting different breakpoints for columns

Live Editor

function GridExample() { const item = <div style={{ background: 'lightblue', height: '30px' }}></div>; return ( <div> <Container> <Row> <Column xs={12} lg={6}> {item} </Column> <Column xs={12} lg={6}> {item} </Column> </Row> <Row> <Column xs={12} lg={6}> {item} </Column> <Column xs={12} lg={6}> {item} </Column> </Row> </Container> </div> ); }

function GridExample() {
  const item = <div style={{ background: 'lightblue', height: '30px' }}></div>;
  return (
    <div>
      <Container>
        <Row>
          <Column xs={12} lg={6}>
            {item}
          </Column>
          <Column xs={12} lg={6}>
            {item}
          </Column>
        </Row>
        <Row>
          <Column xs={12} lg={6}>
            {item}
          </Column>
          <Column xs={12} lg={6}>
            {item}
          </Column>
        </Row>
      </Container>
    </div>
  );
}

Result

Loading...

In the example above you can see we are just passing props for extra small and large resolutions. This setup will end up in the following:

• For extra small, small and medium resolutions, the column will expand up to 12 Columns.
• For large and extra large resolutions, the column will expand up to 6 columns.

Equal width Columns

If you don't specify any breakpoint prop, the column will take all the available space. If you have multiple columns, they will have the same width

Live Editor

function GridExample() { const item = <div style={{ background: 'lightblue', height: '30px' }}></div>; return ( <div> <Container> <Row> <Column>{item}</Column> <Column>{item}</Column> <Column>{item}</Column> </Row> </Container> </div> ); }

function GridExample() {
  const item = <div style={{ background: 'lightblue', height: '30px' }}></div>;
  return (
    <div>
      <Container>
        <Row>
          <Column>{item}</Column>
          <Column>{item}</Column>
          <Column>{item}</Column>
        </Row>
      </Container>
    </div>
  );
}

Result

Loading...

Nested Grid

You can also create nested grids and have 12 columns inside a column. It is recommended not to have more than 3 levels of nested grids.

Live Editor

function GridExample() { const item = <div style={{ background: 'lightblue', height: '30px' }}></div>; return ( <div> <Container> <Row> <Column xs={6}> <Row> <Column xs={3}>{item}</Column> <Column xs={9}>{item}</Column> </Row> <Row> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> <Column xs={1}>{item}</Column> </Row> </Column> <Column xs={6}> <Row> <Column xs={12}>{item}</Column> </Row> <Row> <Column xs={6}>{item}</Column> <Column xs={6}>{item}</Column> </Row> </Column> </Row> </Container> </div> ); }

function GridExample() {
  const item = <div style={{ background: 'lightblue', height: '30px' }}></div>;
  return (
    <div>
      <Container>
        <Row>
          <Column xs={6}>
            <Row>
              <Column xs={3}>{item}</Column>
              <Column xs={9}>{item}</Column>
            </Row>
            <Row>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
              <Column xs={1}>{item}</Column>
            </Row>
          </Column>
          <Column xs={6}>
            <Row>
              <Column xs={12}>{item}</Column>
            </Row>
            <Row>
              <Column xs={6}>{item}</Column>
              <Column xs={6}>{item}</Column>
            </Row>
          </Column>
        </Row>
      </Container>
    </div>
  );
}

Result

Loading...

Props

Name	Type	Default
children The content of the column.	ReactNode	—
xs Number of columns to span on extra small resolutions.	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12	—
sm Number of columns to span on small resolutions.	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12	—
md Number of columns to span on medium resolutions.	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12	—
lg Number of columns to span on large resolutions.	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12	—
xl Number of columns to span on extra large resolutions.	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12	—
spacing spacing is the gap between column in px	number	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.