Grid and Cell

The grid and cell components are the foundation for positioning elements on the screen.

Code

Usage

import { Grid, Cell } from "@twilio-labs/match/components";
const Component = () => (
<Grid gridTemplateColumns="1fr 1fr" gridGap="scale100">
<Cell padding="scale260">Twilio</Cell>
<Cell padding="scale260">SendGrid</Cell>
</Grid>
);

Grid Props

PropTypeDefaultDescription
gridGap?SpacenullSets the gap between rows and columns. Suggested values: 'space420', 'space260', 'space180', 'space100'
gridRowGap?SpacenullSets the gap between rows. Suggested values: 'space420', 'space260', 'space180', 'space100'
gridColumnGap?SpacenullSets the gap between columns. Suggested values: 'space420', 'space260', 'space180', 'space100'
gridAutoFlow?stringnullSpecifies how auto-placed items get placed in the grid
gridAutoRows?stringnullSpecifies the size of an implicitly-created grid row track or pattern of tracks
gridAutoColumns?stringnullSpecifies the size of an implicitly-created grid column track or pattern of tracks
gridTemplateRows?stringnullDefines the line names and track sizing functions of the grid rows
gridTemplateColumns?stringnullDefines the line names and track sizing functions of the grid columns
gridTemplateAreas?stringnullSpecifies named grid areas, establishing the cells in the grid and assigning them names
alignItems?stringnullSets the align-self value for all children
alignContent?stringnullSets the distribution of space between and around the grid’s children along the cross/block axis
justifyItems?stringnullSets the justify-self value for all children
justifyContent?stringnullSets distribution of space between and around the grid’s children along the main-axis/inline axis

Also supports padding and margin props.

Cell Props

PropTypeDefaultDescription
alignSelf?stringnullAligns the cell in the grid along the appropriate axis
justifySelf?stringnullSets the justification of the cell in the grid along the appropriate axis
order?intnullSet the order of the cells. Cells in the same grid are sorted in ascending order.
gridColumn?stringnullSpecifies the cell’s size and location within the column of a grid
gridRow?stringnullSpecifies the cell’s size and location within the row of a grid
gridArea?stringnullSpecifies cell's size and location within a grid
backgroundColor?BackgroundColorsnullSets the cell's background color

Also supports padding and margin props.


Guidelines

About Grids and Cells

The grid component helps position and align content, creating a consistent layout. A grid can be used on the page overall, within page sections, and within components. Grids are responsive and will resize as the browser width changes. Additionally, the grid component can be used to adjust the layout as the browser width changes.

Accessibility

  • The cells should be in a logical order based upon content. Ensure that the semantic order of content remains logical if the visual order of content is changed. Additionally, ensure that the keyboard tab order of cells remains consistent with the visual order of cells.
  • Do not get rid of semantic elements to create a simpler layout. For example, do not get rid of ul to use li as cells. Semantic elements are critical for screen reader users

Composition

Design

There is a grid for desktop, tablet, and mobile. Each of these grids can be added to any frame using the "layout grid" in the right hand menus.

Development

The grid and cell components use styled-system as a means for exposing customizable css as components props. The exposed props follow CSS Grid allowing for a comprehensive coverage for a variety of layout use cases.


Examples

Responsive

The grid component can be used to make a responsive layout. Any prop can use the notation [value, value, value] and the first value would correspond to mobile, the second value, would correspond to tablet, and the third value would correspond to desktop.

The example below aligns four rectangles based on the browser width. Desktop has 4 rectangles across in a single row with 48px gaps. Tablet has 2 rows with 2 rectangles across and 32px gaps. Mobile has 4 rows, each with a single rectangle and 16px gaps.

Best-in-class channel APIs to keep the conversation going across channels
Global reach and unrivaled scale that supports over 8 million developers

Uneven Columns

The Grid prop gridTemplateColumns can be used to easily create layouts that span various amounts of columns.

This example also uses the Grid prop alignItems to make the content in each cell align to the center of the cell along the y-axis. The cells with icons also use the prop justifySelf to align that cell's content to the center of the cell along the x-axis.

Twilio provides a simple entry point into the telephony world, and helps your business avoid many of the traditional complexities.

Made for developers by developers

Grid Template Areas

The Grid prop gridTemplateArea can be combined with Cell components using the gridArea prop to easily create custom layouts.

Programmable SMS

Developer Digest, a monthly dose of all things code

Twilio makes sending and receiving SMS easy. Find the documentation, sample code, and developer tools you need to build exactly what you want, fast. Let’s get building.

Alignment

The Grid and Cell components have alignment props which can help align Cells to their desired location along the y-axis. For instance, alignSelf can set a cell to take up the entire height of the largest cell in that row or it can set the cell to align at the top, center, or bottom.

start
center
end
stretch

Justification

The Grid and Cell components have justification props which can help align Cells to their desired location along the x-axis. For instance, justifySelf can set a cell to take up the entire width of the longest cell in that column or it can be set to align at the left, center, or right of the longest cell.

start
center
end
stretch