Grid 网格布局容器

使用场景

示例

基本示例

inline

function Columns() { return ( <Grid columns={3} spacing={12}> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> </Grid> ); }

function Columns() {
  return (
    <Grid columns={3} spacing={12}>
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
    </Grid>
  );
}

预设响应式

inline

function Responsive() { return ( <Grid columns={{ s: 2, m: 4, l: 6 }} spacing="12px"> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> </Grid> ); }

function Responsive() {
  return (
    <Grid columns={{ s: 2, m: 4, l: 6 }} spacing="12px">
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
    </Grid>
  );
}

自动响应式

inline

function AutoResponsive() { return ( <Grid minChildWidth="120px" spacing="12px"> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> </Grid> ); }

function AutoResponsive() {
  return (
    <Grid minChildWidth="120px" spacing="12px">
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
    </Grid>
  );
}

间距

inline

function Spacing() { return ( <Grid columns={3} spacingX={6} spacingY={12}> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> <Box bg="blue" height="80px" /> </Grid> ); }

function Spacing() {
  return (
    <Grid columns={3} spacingX={6} spacingY={12}>
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
      <Box bg="blue" height="80px" />
    </Grid>
  );
}

不同列宽

inline

function ColSpan() { return ( <Grid height="100px" templateColumns="repeat(12, 1fr)" gap="4px"> <GridItem colSpan={4} bg="blue" /> <GridItem colSpan={8} bg="orange" /> </Grid> ); }

function ColSpan() {
  return (
    <Grid height="100px" templateColumns="repeat(12, 1fr)" gap="4px">
      <GridItem colSpan={4} bg="blue" />
      <GridItem colSpan={8} bg="orange" />
    </Grid>
  );
}

自定义用法

inline

function Complex() { return ( <Grid height="200px" templateRows="repeat(2, 1fr)" templateColumns="repeat(5, 1fr)" gap="4px"> <GridItem rowSpan={2} colSpan={1} bg="black" /> <GridItem colSpan={2} bg="orange" /> <GridItem colSpan={2} bg="orange" /> <GridItem colSpan={4} bg="black" /> </Grid> ); }

function Complex() {
  return (
    <Grid
      height="200px"
      templateRows="repeat(2, 1fr)"
      templateColumns="repeat(5, 1fr)"
      gap="4px">
      <GridItem rowSpan={2} colSpan={1} bg="black" />
      <GridItem colSpan={2} bg="orange" />
      <GridItem colSpan={2} bg="orange" />
      <GridItem colSpan={4} bg="black" />
    </Grid>
  );
}

布局偏移

inline

function StartEnd() { return ( <Grid templateColumns="repeat(5, 1fr)" gap="4px"> <GridItem colSpan={2} height="40px" bg="tomato" /> <GridItem colStart={4} colEnd={6} height="40px" bg="papayawhip" /> </Grid> ); }

function StartEnd() {
  return (
    <Grid templateColumns="repeat(5, 1fr)" gap="4px">
      <GridItem colSpan={2} height="40px" bg="tomato" />
      <GridItem colStart={4} colEnd={6} height="40px" bg="papayawhip" />
    </Grid>
  );
}

API

Grid

字段	描述
columns	ResponsiveType 列数
spacing	StringOrNumber 间距
spacingX	StringOrNumber 水平方向间距
spacingY	StringOrNumber 垂直方向间距
minChildWidth	StringOrNumber 子元素最小宽度
templateColumns	GridTemplateColumns<0 | (string & {})> 定义每一列的宽度
templateRows	GridTemplateRows<0 | (string & {})> 定义每一行的高度
templateArea	GridTemplateAreas
area	GridArea
as	any
style	CSSProperties
className	string
m	StringOrNumber
margin	StringOrNumber
mt	StringOrNumber
marginTop	StringOrNumber
mr	StringOrNumber
marginRight	StringOrNumber
mb	StringOrNumber
marginBottom	StringOrNumber
ml	StringOrNumber
marginLeft	StringOrNumber
mx	StringOrNumber
marginX	StringOrNumber
my	StringOrNumber
marginY	StringOrNumber
p	StringOrNumber
padding	StringOrNumber
pt	StringOrNumber
paddingTop	StringOrNumber
pr	StringOrNumber
paddingRight	StringOrNumber
pb	StringOrNumber
paddingBottom	StringOrNumber
pl	StringOrNumber
paddingLeft	StringOrNumber
px	StringOrNumber
paddingX	StringOrNumber
py	StringOrNumber
paddingY	StringOrNumber
color	Color
bg	Color
backgroundColor	Color
opacity	Opacity
width	StringOrNumber
minWidth	StringOrNumber
maxWidth	StringOrNumber
height	StringOrNumber
minHeight	StringOrNumber
maxHeight	StringOrNumber
size	StringOrNumber
display	Display
verticalAlign	VerticalAlign<0 | (string & {})>
overflow	Overflow
overflowX	OverflowX
overflowY	OverflowY
fontFamily	FontFamily
fontStyle	FontStyle
letterSpacing	LetterSpacing<0 | (string & {})>
textAlign	TextAlign
fontSize	string
fontWeight	FontWeight
lineHeight	StringOrNumber
alignItems	AlignItems
alignContent	AlignContent
justifyItems	JustifyItems
justifyContent	JustifyContent
flexWrap	FlexWrap
flexDirection	FlexDirection
flex	Flex<Length>
flexGrow	FlexGrow
flexShrink	FlexShrink
flexBasis	FlexBasis<Length>
justifySelf	JustifySelf
alignSelf	AlignSelf
order	Order
gridGap	GridGap<Length>
gridRowGap	GridRowGap<Length>
gridColumnGap	GridColumnGap<Length>
gridColumn	GridColumn
gridColumnStart	GridColumnStart
gridColumnEnd	GridColumnEnd
gridRow	GridRow
gridRowStart	GridRowStart
gridRowEnd	GridRowEnd
gridArea	GridArea
gridTemplateRows	GridTemplateRows<0 | (string & {})>
gridTemplateColumns	GridTemplateColumns<0 | (string & {})>
gridTemplateAreas	GridTemplateAreas
border	string
borderTop	string
borderRight	string
borderBottom	string
borderLeft	string
borderWidth	StringOrNumber
borderColor	Color
borderTopColor	Color
borderRightColor	Color
borderBottomColor	Color
borderLeftColor	Color
borderRadius	string
position	Position
zIndex	ZIndex
top	string
right	string
bottom	string
left	string
boxShadow	BoxShadow
textShadow	TextShadow

GridItem

字段	描述
colSpan	StringOrNumber
colStart	GridColumnStart
colEnd	GridColumnEnd
rowSpan	StringOrNumber
rowStart	GridRowEnd
rowEnd	GridRowEnd
as	any
style	CSSProperties
className	string
m	StringOrNumber
margin	StringOrNumber
mt	StringOrNumber
marginTop	StringOrNumber
mr	StringOrNumber
marginRight	StringOrNumber
mb	StringOrNumber
marginBottom	StringOrNumber
ml	StringOrNumber
marginLeft	StringOrNumber
mx	StringOrNumber
marginX	StringOrNumber
my	StringOrNumber
marginY	StringOrNumber
p	StringOrNumber
padding	StringOrNumber
pt	StringOrNumber
paddingTop	StringOrNumber
pr	StringOrNumber
paddingRight	StringOrNumber
pb	StringOrNumber
paddingBottom	StringOrNumber
pl	StringOrNumber
paddingLeft	StringOrNumber
px	StringOrNumber
paddingX	StringOrNumber
py	StringOrNumber
paddingY	StringOrNumber
color	Color
bg	Color
backgroundColor	Color
opacity	Opacity
width	StringOrNumber
minWidth	StringOrNumber
maxWidth	StringOrNumber
height	StringOrNumber
minHeight	StringOrNumber
maxHeight	StringOrNumber
size	StringOrNumber
display	Display
verticalAlign	VerticalAlign<0 | (string & {})>
overflow	Overflow
overflowX	OverflowX
overflowY	OverflowY
fontFamily	FontFamily
fontStyle	FontStyle
letterSpacing	LetterSpacing<0 | (string & {})>
textAlign	TextAlign
fontSize	string
fontWeight	FontWeight
lineHeight	StringOrNumber
alignItems	AlignItems
alignContent	AlignContent
justifyItems	JustifyItems
justifyContent	JustifyContent
flexWrap	FlexWrap
flexDirection	FlexDirection
flex	Flex<Length>
flexGrow	FlexGrow
flexShrink	FlexShrink
flexBasis	FlexBasis<Length>
justifySelf	JustifySelf
alignSelf	AlignSelf
order	Order
gridGap	GridGap<Length>
gridRowGap	GridRowGap<Length>
gridColumnGap	GridColumnGap<Length>
gridColumn	GridColumn
gridColumnStart	GridColumnStart
gridColumnEnd	GridColumnEnd
gridRow	GridRow
gridRowStart	GridRowStart
gridRowEnd	GridRowEnd
gridArea	GridArea
gridTemplateRows	GridTemplateRows<0 | (string & {})>
gridTemplateColumns	GridTemplateColumns<0 | (string & {})>
gridTemplateAreas	GridTemplateAreas
border	string
borderTop	string
borderRight	string
borderBottom	string
borderLeft	string
borderWidth	StringOrNumber
borderColor	Color
borderTopColor	Color
borderRightColor	Color
borderBottomColor	Color
borderLeftColor	Color
borderRadius	string
position	Position
zIndex	ZIndex
top	string
right	string
bottom	string
left	string
boxShadow	BoxShadow
textShadow	TextShadow