Skip to content

Grid.md

Latest commit

 

History

History
145 lines (121 loc) · 3.59 KB

Grid.md

File metadata and controls

145 lines (121 loc) · 3.59 KB
id Grid
cssPrefix pf-v6-l-grid
section foundations-and-styles
subsection layouts
propComponents
Grid
GridItem

import './grid.css';

Examples

Basic

import { Grid, GridItem } from '@patternfly/react-core';

<Grid>
  <GridItem span={8}>span = 8</GridItem>
  <GridItem span={4} rowSpan={2}>
    span = 4, rowSpan = 2
  </GridItem>
  <GridItem span={2} rowSpan={3}>
    span = 2, rowSpan = 3
  </GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={4}>span = 4</GridItem>
</Grid>;

With gutters

import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter>
  <GridItem span={8}>span = 8</GridItem>
  <GridItem span={4} rowSpan={2}>
    span = 4, rowSpan = 2
  </GridItem>
  <GridItem span={2} rowSpan={3}>
    span = 2, rowSpan = 3
  </GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={4}>span = 4</GridItem>
</Grid>;

With overrides

import { Grid, GridItem } from '@patternfly/react-core';

<Grid sm={6} md={4} lg={3} xl2={1}>
  <GridItem span={3} rowSpan={2}>
    span = 3 rowSpan= 2
  </GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
</Grid>;

Ordering

Standard ordering

import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={3}>
  <GridItem order={{ default: '2' }}>Item A</GridItem>
  <GridItem>Item B</GridItem>
  <GridItem order={{ default: '-1' }}>Item C</GridItem>
</Grid>;

Responsive ordering

import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={3}>
  <GridItem order={{ lg: '2' }}>Item A</GridItem>
  <GridItem>Item B</GridItem>
  <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
</Grid>;

Grouped ordering

import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={12}>
  <Grid hasGutter span={6} order={{ default: '2' }}>
    <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
    <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
    <GridItem>Set 1, Item C</GridItem>
    <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
  </Grid>
  <Grid hasGutter span={6}>
    <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
    <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
    <GridItem>Set 2, Item C</GridItem>
    <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
  </Grid>
</Grid>;

Alternative components

import { Grid, GridItem } from '@patternfly/react-core';

<Grid component="ul">
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
</Grid>;