Grid

Overview

The Grid is made up of a few components that you can use to create your own layouts:

import React from 'react';
import { Grid } from 'telus-thorium-enriched';
const { Container, Row, Column } = Grid;

const MyComponent = (props) => {
  return (
    <Container>
      <Row>
        <Column xs={ 12 } lg={ 8 }></Column>
        <Column xs={ 12 } lg={ 4 }></Column>
      </Row>
    </Container>
  );
};

See the docs on TDS’ CSS grid to learn more about grid structure and attributes.

Container

Containers are basic components that wrap grid elements. They don’t do much on their own, but Row and Column elements need to be inside a Container to display correctly.

// Attributes on containers will be passed to the underlying div node.
<Container className='cool-container' id='hello'>
  // You can put anything you want inside a container.
</Container>

Row

Rows divide your content horizontally. They should be direct descendants of Container elements and typically contain only Column elements.

<Container>
  // Rows also pass attributes to the div.
  <Row className='row-override'>
    // ...
  </Row>
</Container>

Rows don’t have any special props.

Column

Columns are the real movers and shakers of the grid system. You can set their layout properties across multiple viewport sizes by passing in various props. Reading the TDS CSS grid documentation is recommended if you’re not sure about certain props.

<Container>
  <Row>
    <Column xs={ 12 } lg={ 6 } lgOffset={ 3 }>
      <p>Hello world!</p>
    </Column>
  </Row>
</Container>

Props for Columns have variants for each screen size. Specifying a prop for a smaller screen size will apply to all larger screen sizes, unless overridden.

The different screen sizes are as follows:

• xs: extra small
• sm: small
• md: medium
• lg: large
• xl: extra large