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';

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>
)

Controls

Name
Description
Default
Controls
width1

minimum width of first child element

number
128
width3

minimum width of third child element

number
192

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

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>
)

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>
)
Previous
theme-ui/Form
Next
theme-ui/Heading