The responsive layout is in early preview. Please report any bugs.

Grid

A flex-based horizontal grid system used to build layouts.

Status: production
Version: 2.0.3
Sources: Github
Storybook
Abstract
Import from: @twilio-paste/core/grid — or — @twilio-paste/grid

Guidelines#

The grid component controls the visual layout and spacing between elements on a page or in containers.

About Grid#

Grid creates organized and consistent product layouts, by providing a standard for positioning elements. Grid speeds up the designer-to-developer workflow by improving the consistency of design implementations. Use a Grid to layout and align content by applying standard spacing between elements on a page or within a component.

The standard desktop grid has 24-pixel gutters and can support up to 12 columns. The outside gutters are removed from the overall width of the grid.

Grid is built using the Flex component and is responsive. Grid column widths grow and shrink based on the parent element width.

Examples#

Equal column widths#

Use Column, which is a child component of Grid, to lay out equal-sized content, such as a feed of cards.

Instant Provisioning

The API and the Console allow you to search and provision local, toll-free, or mobile numbers by capability, geography, prefix or keyword.

Vast Inventory

Twilio maintains phone number inventory at a rate of 50 times the quantity provisioned daily for over 600 area codes and prefixes.

Quality Screening

Every phone number in the inventory passes a rigorous 60-day screening process to verify capabilities and test for unwanted call traffic.

<Grid gutter="space30">
  <Column>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Instant Provisioning</Heading>
      <Paragraph>The API and the Console allow you to search and provision local, toll-free, or mobile numbers by capability, geography, prefix or keyword.</Paragraph>
    </Card>
  </Column>
  <Column>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Vast Inventory</Heading>
      <Paragraph>Twilio maintains phone number inventory at a rate of 50 times the quantity provisioned daily for over 600 area codes and prefixes.</Paragraph>
    </Card>
  </Column>
  <Column>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Quality Screening</Heading>
      <Paragraph>Every phone number in the inventory passes a rigorous 60-day screening process to verify capabilities and test for unwanted call traffic.</Paragraph>
    </Card>
  </Column>
</Grid>

<Grid gutter="space30">
  <Column>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Instant Provisioning</Heading>
      <Paragraph>The API and the Console allow you to search and provision local, toll-free, or mobile numbers by capability, geography, prefix or keyword.</Paragraph>
    </Card>
  </Column>
  <Column>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Vast Inventory</Heading>
      <Paragraph>Twilio maintains phone number inventory at a rate of 50 times the quantity provisioned daily for over 600 area codes and prefixes.</Paragraph>
    </Card>
  </Column>
  <Column>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Quality Screening</Heading>
      <Paragraph>Every phone number in the inventory passes a rigorous 60-day screening process to verify capabilities and test for unwanted call traffic.</Paragraph>
    </Card>
  </Column>
</Grid>

Unequal column widths, using column span#

Use the span prop to allow content to span multiple columns. Span defines how many columns you want the width of your content to take up out of a 12-column grid. The value of span becomes the numerator while 12 is the denominator, which gives us a percentage width value for each column. The default span is 1 column width.

In our example we're setting one column to equal 8 of the 12 columns (span={8}), and the other to be 4 of the 12 columns (span={4}).

Getting Started with Parse

Use SendGrid to make your email a two-way street. The Parse Webhook is a powerful tool that can take incoming email for your domain or subdomain and direct it to your application. The possibilities of this are endless!

Your Email Funnel

Expert Insights analyzes each layer of your email funnel to determine leakage points (such as blocked emails) and opportunities to improve deliverability and engagement.

Expert Insights

Send better email with Expert Insights. Our detailed monthly reports with expert recommendations will give you deeper visibility into the health and performance of your email program.

<Grid gutter="space30">
  <Column span={8}>
    <Heading as="h4" variant="heading40">Getting Started with Parse</Heading>
    <Paragraph>
      Use SendGrid to make your email a two-way street. The Parse Webhook is a powerful tool that can take incoming email for your domain or subdomain and direct it to your application. The possibilities of this are endless!
    </Paragraph>
    <Heading as="h4" variant="heading40">Your Email Funnel</Heading>
    <Paragraph>
      Expert Insights analyzes each layer of your email funnel to determine leakage points (such as blocked emails) and opportunities to improve deliverability and engagement.
    </Paragraph>
  </Column>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Expert Insights</Heading>
      <Paragraph>Send better email with Expert Insights. Our detailed monthly reports with expert recommendations will give you deeper visibility into the health and performance of your email program.</Paragraph>
      <Button>Add to Plan</Button>
    </Card>
  </Column>
</Grid>

<Grid gutter="space30">
  <Column span={8}>
    <Heading as="h4" variant="heading40">Getting Started with Parse</Heading>
    <Paragraph>
      Use SendGrid to make your email a two-way street. The Parse Webhook is a powerful tool that can take incoming email for your domain or subdomain and direct it to your application. The possibilities of this are endless!
    </Paragraph>
    <Heading as="h4" variant="heading40">Your Email Funnel</Heading>
    <Paragraph>
      Expert Insights analyzes each layer of your email funnel to determine leakage points (such as blocked emails) and opportunities to improve deliverability and engagement.
    </Paragraph>
  </Column>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h4" variant="heading40">Expert Insights</Heading>
      <Paragraph>Send better email with Expert Insights. Our detailed monthly reports with expert recommendations will give you deeper visibility into the health and performance of your email program.</Paragraph>
      <Button>Add to Plan</Button>
    </Card>
  </Column>
</Grid>

An important note about span and offset props

When using span or offset, base your layout off a 12-column grid. For example, if you want to have two columns with one spanning twice as much as the other, then one column would span=8 and the other would span=4.

Offset column#

Use offset to push a column to the right by a certain number of columns. For example, a layout with centered columns.

Create your first Signup Form

Create and share a form to capture new signups and add them directly to your Contacts. You’ll grow your list the right way, knowing each new contact has opted in to receive your content.

<Grid gutter="space30">
  <Column span={8} offset={2}>
    <Card padding="space70">
      <Text as="div" textAlign="center">
        <Heading as="h4" variant="heading40">Create your first Signup Form</Heading>
        <Paragraph>Create and share a form to capture new signups and add them directly to your Contacts. You’ll grow your list the right way, knowing each new contact has opted in to receive your content.</Paragraph>
        <Button>Create a Signup Form</Button>
      </Text>
    </Card>
  </Column>
</Grid>

<Grid gutter="space30">
  <Column span={8} offset={2}>
    <Card padding="space70">
      <Text as="div" textAlign="center">
        <Heading as="h4" variant="heading40">Create your first Signup Form</Heading>
        <Paragraph>Create and share a form to capture new signups and add them directly to your Contacts. You’ll grow your list the right way, knowing each new contact has opted in to receive your content.</Paragraph>
        <Button>Create a Signup Form</Button>
      </Text>
    </Card>
  </Column>
</Grid>

Equal column heights#

Set equalColumnHeights on a grid container and all columns in a single row will share the height of the tallest column.

This can be useful when trying to visually align Cards where their content is variable.

When columns have equal heights, a single child element will stretch to the height of the column. You may still need to control the width of that child though.

Why use Paste?

Paste helps you rapidly prototype, and ship great, inclusive customer experiences. It makes it easy to do the right thing, cheaply.

Inclusive by default

Paste meets WCAG 2.1 AA standards in the design and development of our components, making it even easier to build accessibly.

Get up and running

Whether you’re a designer or developer, setting up Paste is easy and only takes a few minutes!

<Grid gutter="space30" equalColumnHeights>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h2" variant="heading20">
        Why use Paste?
      </Heading>
      <Paragraph marginBottom="space0">
        Paste helps you rapidly prototype, and ship great, inclusive customer experiences. It makes it easy to
        do the right thing, cheaply.
      </Paragraph>
    </Card>
  </Column>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h2" variant="heading20">
        Inclusive by default
      </Heading>
      <Paragraph marginBottom="space0">
        Paste meets WCAG 2.1 AA standards in the design and development of our components, making it even easier
        to build accessibly.
      </Paragraph>
    </Card>
  </Column>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h2" variant="heading20">
        Get up and running
      </Heading>
      <Paragraph marginBottom="space0">
        Whether you’re a designer or developer, setting up Paste is easy and only takes a few minutes!
      </Paragraph>
    </Card>
  </Column>
</Grid>

<Grid gutter="space30" equalColumnHeights>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h2" variant="heading20">
        Why use Paste?
      </Heading>
      <Paragraph marginBottom="space0">
        Paste helps you rapidly prototype, and ship great, inclusive customer experiences. It makes it easy to
        do the right thing, cheaply.
      </Paragraph>
    </Card>
  </Column>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h2" variant="heading20">
        Inclusive by default
      </Heading>
      <Paragraph marginBottom="space0">
        Paste meets WCAG 2.1 AA standards in the design and development of our components, making it even easier
        to build accessibly.
      </Paragraph>
    </Card>
  </Column>
  <Column span={4}>
    <Card padding="space70">
      <Heading as="h2" variant="heading20">
        Get up and running
      </Heading>
      <Paragraph marginBottom="space0">
        Whether you’re a designer or developer, setting up Paste is easy and only takes a few minutes!
      </Paragraph>
    </Card>
  </Column>
</Grid>

Stacked columns in a vertical layout#

Use the vertical prop to stack columns vertically instead of horizontally. The vertical prop can work along with theme breakpoints, so your grid can be vertical on different viewports. For example to have your grid vertical on mobile and not tablet or desktop viewports, use vertical={[true, false, false]}. For a visual example, see the Storybook example and resize the browser.

Web API

The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.

SMTP Relay

The easiest way to send email. It only requires modifying your application's SMTP configuration.

What's new at Twilio

Check out our newest product releases on the Twilio Changelog.

<Grid gutter="space30" vertical>
  <Column>
    <Box marginTop="space30">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">Web API</Heading>
        <Paragraph>The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.</Paragraph>
        <Button>Choose</Button>
      </Card>
    </Box>
  </Column>
  <Column>
    <Box marginTop="space30">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">SMTP Relay</Heading>
        <Paragraph>The easiest way to send email. It only requires modifying your application's SMTP configuration.</Paragraph>
        <Button>Choose</Button>
      </Card>
    </Box>
  </Column>
  <Column>
    <Box marginTop="space30">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">What's new at Twilio</Heading>
        <Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
        <Button>Changelog</Button>
      </Card>
    </Box>
  </Column>
</Grid>

<Grid gutter="space30" vertical>
  <Column>
    <Box marginTop="space30">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">Web API</Heading>
        <Paragraph>The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.</Paragraph>
        <Button>Choose</Button>
      </Card>
    </Box>
  </Column>
  <Column>
    <Box marginTop="space30">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">SMTP Relay</Heading>
        <Paragraph>The easiest way to send email. It only requires modifying your application's SMTP configuration.</Paragraph>
        <Button>Choose</Button>
      </Card>
    </Box>
  </Column>
  <Column>
    <Box marginTop="space30">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">What's new at Twilio</Heading>
        <Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
        <Button>Changelog</Button>
      </Card>
    </Box>
  </Column>
</Grid>

Nested Grids#

A Grid can be nested inside another Grid. For example, you can split a column into multiple smaller columns in order to stack the outer Grid in a responsive view but not the inner Grid.

Getting Started

To get started with Phone Numbers, check out our Getting Started Guide.

About Web API

The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.

SMTP Relay

The easiest way to send email. It only requires modifying your application's SMTP configuration.

About Phone Numbers

Programmable phone numbers are a core part of Twilio’s platform, enabling you to receive SMS, MMS, and phone calls.

Messaging Services

Messaging Services allow you to organize your messages and enable specific features for groups of messages.

<Grid vertical>
  <Column>
    <Grid gutter="space30">
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">Getting Started</Heading>
          <Paragraph>To get started with Phone Numbers, check out our Getting Started Guide.</Paragraph>
        </Card>
      </Column>
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">About Web API</Heading>
          <Paragraph>The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.</Paragraph>
        </Card>
      </Column>
    </Grid>
  </Column>
  <Column>
    <Box marginTop="space60" marginBottom="space60">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">SMTP Relay</Heading>
        <Paragraph>The easiest way to send email. It only requires modifying your application's SMTP configuration.</Paragraph>
      </Card>
    </Box>
  </Column>
  <Column>
    <Grid gutter="space30">
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">About Phone Numbers</Heading>
          <Paragraph>Programmable phone numbers are a core part of Twilio’s platform, enabling you to receive SMS, MMS, and phone calls.</Paragraph>
        </Card>
      </Column>
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">Messaging Services</Heading>
          <Paragraph>Messaging Services allow you to organize your messages and enable specific features for groups of messages.</Paragraph>
        </Card>
      </Column>
    </Grid>
  </Column>
</Grid>

<Grid vertical>
  <Column>
    <Grid gutter="space30">
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">Getting Started</Heading>
          <Paragraph>To get started with Phone Numbers, check out our Getting Started Guide.</Paragraph>
        </Card>
      </Column>
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">About Web API</Heading>
          <Paragraph>The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.</Paragraph>
        </Card>
      </Column>
    </Grid>
  </Column>
  <Column>
    <Box marginTop="space60" marginBottom="space60">
      <Card padding="space70">
        <Heading as="h4" variant="heading40">SMTP Relay</Heading>
        <Paragraph>The easiest way to send email. It only requires modifying your application's SMTP configuration.</Paragraph>
      </Card>
    </Box>
  </Column>
  <Column>
    <Grid gutter="space30">
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">About Phone Numbers</Heading>
          <Paragraph>Programmable phone numbers are a core part of Twilio’s platform, enabling you to receive SMS, MMS, and phone calls.</Paragraph>
        </Card>
      </Column>
      <Column>
        <Card padding="space70">
          <Heading as="h4" variant="heading40">Messaging Services</Heading>
          <Paragraph>Messaging Services allow you to organize your messages and enable specific features for groups of messages.</Paragraph>
        </Card>
      </Column>
    </Grid>
  </Column>
</Grid>

Responsive columns#

Grid column span and offset props can be changed based on the theme breakpoints. Both span and offset can accept responsive values, for example span={[6, 8, 2] }. This would set a columns span to be 6 columns wide on mobile, 8 columns wide on tablet, and 2 columns wide on desktop. The offset prop works in a similar fashion. For a visual example, see the Storybook example and resize the browser.

Composition Notes#

Grid can be used to compose various types of layouts ranging from whole application pages and views down to individual component layouts.

Gutter sizing

For spacing content in a layout wider than 1440 pixels, we recommend using a 24-pixel gutter. Use $space-40 to get a 24-pixel gutter.

For spacing content in a layout narrower than 1440 pixels, we recommend using a 16-pixel gutter. Use $space-30 to get a 16-pixel gutter.

Basic page layout#

Let's look at a common use case where we need to layout a page with a sidebar and a grid within the page content area.

Dashboard

Billing

Usage

Settings

Project Info

BALANCE

$33.28

REFERRAL PROGRAM

Refer your network to Twilio — give $10, get $10.

What's new at Twilio

Check out our newest product releases on the Twilio Changelog.

Twilio Docs

Dig into our API reference documentation and quickstarts. You're covered with everything from SDKs in your favorite languages to sample apps for web, iOS, and Android.

<Card padding="space70">
  <Grid gutter="space30">
    <Column span={3}>
      <Box backgroundColor="colorBackground" padding="space70" borderRadius="borderRadius20">
        <Heading as="h4" variant="heading40">Dashboard</Heading>
        <Box marginBottom="space20">
          <Anchor href="#">Billing</Anchor>
        </Box>
        <Box marginBottom="space20">
          <Anchor href="#">Usage</Anchor>
        </Box>
        <Box marginBottom="space20">
          <Anchor href="#">Settings</Anchor>
        </Box>
      </Box>
    </Column>
    <Column span={9}>
      <Box marginBottom="space50">
        <Card>
          <Heading as="h4" variant="heading40">Project Info</Heading>
          <Text as="p" marginBottom="space0" color="colorTextWeak">BALANCE</Text>
          <Text as="p" marginBottom="space50" color="colorTextSuccess" fontWeight="fontWeightBold">$33.28</Text>
          <Text as="p" marginBottom="space0" color="colorTextWeak">REFERRAL PROGRAM</Text>
          <Text as="p" marginBottom="space0">Refer your network to Twilio — give $10, get $10.</Text>
        </Card>
      </Box>
      <Grid gutter="space30">
        <Column>
          <Card>
            <Heading as="h4" variant="heading40">What's new at Twilio</Heading>
            <Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
            <Button>Changelog</Button>
          </Card>
        </Column>
        <Column>
          <Card>
            <Heading as="h4" variant="heading40">Twilio Docs</Heading>
            <Paragraph>Dig into our API reference documentation and quickstarts. You're covered with everything from SDKs in your favorite languages to sample apps for web, iOS, and Android.</Paragraph>
            <Button variant="secondary">Explore the Docs</Button>
          </Card>
        </Column>
      </Grid>
    </Column>
  </Grid>
</Card>

<Card padding="space70">
  <Grid gutter="space30">
    <Column span={3}>
      <Box backgroundColor="colorBackground" padding="space70" borderRadius="borderRadius20">
        <Heading as="h4" variant="heading40">Dashboard</Heading>
        <Box marginBottom="space20">
          <Anchor href="#">Billing</Anchor>
        </Box>
        <Box marginBottom="space20">
          <Anchor href="#">Usage</Anchor>
        </Box>
        <Box marginBottom="space20">
          <Anchor href="#">Settings</Anchor>
        </Box>
      </Box>
    </Column>
    <Column span={9}>
      <Box marginBottom="space50">
        <Card>
          <Heading as="h4" variant="heading40">Project Info</Heading>
          <Text as="p" marginBottom="space0" color="colorTextWeak">BALANCE</Text>
          <Text as="p" marginBottom="space50" color="colorTextSuccess" fontWeight="fontWeightBold">$33.28</Text>
          <Text as="p" marginBottom="space0" color="colorTextWeak">REFERRAL PROGRAM</Text>
          <Text as="p" marginBottom="space0">Refer your network to Twilio — give $10, get $10.</Text>
        </Card>
      </Box>
      <Grid gutter="space30">
        <Column>
          <Card>
            <Heading as="h4" variant="heading40">What's new at Twilio</Heading>
            <Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
            <Button>Changelog</Button>
          </Card>
        </Column>
        <Column>
          <Card>
            <Heading as="h4" variant="heading40">Twilio Docs</Heading>
            <Paragraph>Dig into our API reference documentation and quickstarts. You're covered with everything from SDKs in your favorite languages to sample apps for web, iOS, and Android.</Paragraph>
            <Button variant="secondary">Explore the Docs</Button>
          </Card>
        </Column>
      </Grid>
    </Column>
  </Grid>
</Card>

Responsive page layout#

Grid can also be used for responsive layouts.

You can determine what size columns should be based on the breakpoints set on a theme. See the Storybook example
Grid columns can also stack based on theme breakpoints. See the Storybook example

Component layout#

Grids can also be used for layouts within other components. For example, we can set up our card content to include 2 columns.

What's new at Twilio

Check out our newest product releases on the Twilio Changelog.

<Card padding="space70">
  <Grid gutter="space30">
    <Column span={2}>
      <TwilioIcon color={TWILIO_RED} display="block" size={65} />
    </Column>
    <Column span={10}>
      <Heading as="h4" variant="heading40">What's new at Twilio</Heading>
      <Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
      <Button>Changelog</Button>
    </Column>
  </Grid>
</Card>

<Card padding="space70">
  <Grid gutter="space30">
    <Column span={2}>
      <TwilioIcon color={TWILIO_RED} display="block" size={65} />
    </Column>
    <Column span={10}>
      <Heading as="h4" variant="heading40">What's new at Twilio</Heading>
      <Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
      <Button>Changelog</Button>
    </Column>
  </Grid>
</Card>

When to use Grid#

Use Grid whenever you need to layout or align content on a page or within a component. Grid should also be used for responsive page layouts. Since the grid is sized to the full width of its parent container, you may not want to use it for fixed width columns in a variable width container.

4 Column Card

8 Column Card

Do

Base the Column span and offset on a 12-column layout.

Card content

Don't

Don’t use more than 12 columns within Grid.

Card content

Do

Use Grid to align content to the right or left side of a page layout.

Unnecessary HTML elements. Use Box instead.

Don't

Don’t use Grid with only one full-width column of content. This causes unnecessary elements. Box is what you’re looking for here.

Card content

Do

Use Grid to lay out UI elements into consistent columns.

Card content

Don't

Don’t let columns grow too small. Gutters should never be wider than columns.

Usage Guide#

API#

Installation#

yarn add @twilio-paste/grid - or - yarn add @twilio-paste/core

Usage#

import {Grid, Column} from '@twilio-paste/grid';
const Component = () => (
  <Grid>
    <Column>Foo</Column>
  </Grid>
);

Grid Props#

Prop	Type	Description
equalColumnHeights?	`boolean`	Sets the height of columns in a row to be equal.
gutter?	`ResponsiveValue<keyof ThemeShape['space']>`	Sets the spacing on both sides of a Column. Use a spacing token that represents half of the total space you need between 2 Columns.
vertical?	`boolean, ResponsiveValue<boolean>`	Stacks the Columns

Column Props#

Prop	Type	Description	Default
span?	`number, ResponsiveValue<number>`	Sets the width of Columns (how many columns a column can span)
offset?	`number, ResponsiveValue<number>`	Sets the left margin of a Column (how many columns a column is offset)

Sketch#

Add Grid symbols from the “Paste components” project to your own artboards to help you align content.

Additionally, each Paste container component (e.g., Card, Modal) symbol in Sketch has an invisible grid symbol named “📐 Grid” that you can override with visible grid symbols.

We use grid symbols instead of Sketch Layout Settings for two reasons:

Resizing a symbol better represents the behavior of a fluid grid in a responsive layout. You might be designing for multiple screen widths in a single Sketch file. Sketch Layout Settings, however, restricts you to a single setting of grid width, column width, gutter width, and number of columns for each file.
Symbols allow you to place a grid within a component or container on an artboard, whereas Sketch Layout Settings can be applied only to a whole artboard.

Grid

Guidelines.css-1p5xx02{-webkit-text-decoration:none;text-decoration:none;margin-left:0.5rem;color:rgb(96,107,133);}.css-1p5xx02:hover{-webkit-text-decoration:underline;text-decoration:underline;}#

About Grid#

Examples#

Equal column widths#

Instant Provisioning

Vast Inventory

Quality Screening

Unequal column widths, using column span#

Getting Started with Parse

Your Email Funnel

Expert Insights

An important note about span and offset props

Offset column#

Create your first Signup Form

Equal column heights#

Why use Paste?

Inclusive by default

Get up and running

Stacked columns in a vertical layout#

Web API

SMTP Relay

What's new at Twilio

Nested Grids#

Getting Started

About Web API

SMTP Relay

About Phone Numbers

Messaging Services

Responsive columns#

Composition Notes#

Gutter sizing

Basic page layout#

Dashboard

Project Info

What's new at Twilio

Twilio Docs

Responsive page layout#

Component layout#

What's new at Twilio

When to use Grid#

Do

Don't

Do

Don't

Do

Don't

Usage Guide#

API#

Installation#

Usage#

Grid Props#

Column Props#

Sketch#

2.0.3#

Patch Changes#

2.0.2#

Patch Changes#

2.0.1#

Patch Changes#

2.0.0#

Patch Changes#

1.0.2#

Patch Changes#

1.0.1#

Patch Changes#

1.0.0#

Patch Changes#

0.6.2#

Patch Changes#

0.6.1link takes you to an external page (2021-01-25)

Features#

0.5.3link takes you to an external page (2021-01-15)

0.5.2link takes you to an external page (2021-01-07)

0.5.1link takes you to an external page (2020-12-17)

Bug Fixes#

BREAKING CHANGES#

0.4.4link takes you to an external page (2020-12-15)

0.4.3link takes you to an external page (2020-12-11)

0.4.2link takes you to an external page (2020-12-11)

Guidelines#

0.6.1 (2021-01-25)

0.5.3 (2021-01-15)

0.5.2 (2021-01-07)

0.5.1 (2020-12-17)

0.4.4 (2020-12-15)

0.4.3 (2020-12-11)

0.4.2 (2020-12-11)

0.4.1 (2020-12-09)

0.2.71 (2020-11-11)

0.2.70 (2020-11-06)

0.2.69 (2020-11-05)

0.2.68 (2020-10-23)

0.2.67 (2020-10-15)

0.2.66 (2020-10-13)

0.2.65 (2020-10-07)

0.2.64 (2020-10-07)

0.2.63 (2020-10-07)

0.2.62 (2020-10-07)

0.2.61 (2020-09-22)

0.2.60 (2020-09-21)

0.2.59 (2020-09-15)

0.2.58 (2020-09-15)

0.2.57 (2020-09-08)

0.2.56 (2020-09-08)

0.2.55 (2020-09-03)

0.2.54 (2020-08-31)

0.2.53 (2020-08-31)

0.2.52 (2020-08-24)

0.2.51 (2020-08-19)

0.2.50 (2020-08-12)

0.2.49 (2020-08-12)

0.2.48 (2020-08-06)

0.2.47 (2020-08-04)

0.2.46 (2020-08-04)

0.2.45 (2020-07-31)

0.2.44 (2020-07-30)

0.2.43 (2020-07-29)

0.2.42 (2020-07-22)

0.2.41 (2020-07-15)

0.2.40 (2020-07-14)

0.2.39 (2020-07-14)

0.2.38 (2020-07-01)

0.2.37 (2020-06-29)

0.2.36 (2020-06-25)

0.2.35 (2020-06-22)

0.2.34 (2020-06-18)

0.2.33 (2020-06-16)

0.2.32 (2020-06-12)

0.2.31 (2020-06-10)

0.2.30 (2020-06-05)

0.2.29 (2020-06-01)

0.2.28 (2020-06-01)

0.2.27 (2020-05-27)

0.2.26 (2020-05-20)

0.2.25 (2020-05-07)

0.2.24 (2020-05-07)

0.2.23 (2020-05-04)

0.2.22 (2020-05-01)

0.2.21 (2020-04-25)

0.2.20 (2020-04-24)

0.2.19 (2020-04-22)

0.2.18 (2020-04-17)

0.2.17 (2020-04-15)

0.2.16 (2020-04-08)

0.2.15 (2020-04-07)

0.2.14 (2020-04-07)

0.2.13 (2020-04-02)

0.2.12 (2020-03-28)

0.2.11 (2020-03-24)

0.2.10 (2020-03-20)