skip to main content
skip to navigation sidebar
skip to context sidebar
Collection of theme-ui and external components.
Theme UI
Edit this page
created:3/15/2021
updated:3/15/2021
source lines:31
comments %:0

Grid

theme-ui
0.6.0-alpha.7

CSS grid layout component to arrange direct child elements in a tiled grid layout.

Component

browse
docs
issues
import { Grid } from 'theme-ui';

Fractions

Box
Box
Box
Box

browse
docs
issues
({ gap, col1, fr1, fr2 }) => (
  <Grid gap={gap} columns={[col1, `${fr1}fr ${fr2}fr`]}>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
  </Grid>
)

Controls

Name
Description
Default
Controls
- (3 properties)
col1

number of (equally-sized) columns in first position

number
2
fr1

fraction-sized child elements

number
1
fr2

fraction-sized child elements

number
2
GridProps (1 properties)

Properties

Name
Description
Default
BoxOwnProps (4 properties)
as
ElementType<any>
-
variant
string
-
css
Interpolation<any>
-
sx
ThemeUIStyleObject
-
SpaceProps (28 properties)
HTMLAttributes (44 properties)
GridProps (3 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)

External dependencies

package
imports
peer
react
React

Internal dependencies

file
imports
"./Box"
Box

Component JSX

<Box
ref__themeKey__css
/>
Box
from"./Box"

Stories

Width

Box
Box
Box
Box

browse
docs
issues
({
  width1,
  width3,
}) => (
  <Grid width={[width1, null, width3]}>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
  </Grid>
)

Columns

Box
Box
Box
Box

browse
docs
issues
({
  gap,
  col1,
  col3,
}) => (
  <Grid gap={gap} columns={[col1, null, col3]}>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
  </Grid>
)
Previous
theme-ui/Form
Next
theme-ui/Heading