Skip to content
Primer/Primer Brand
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

On this page

Grid

Use Grid to create flexible and responsive grid-based layouts
  • Experimental
  • Not reviewed for accessibility
On this page
import {Grid} from '@primer/react-brand'

Examples

Default

The Grid component uses a 12-column layout system. Use span to control the number of columns that should be displayed.

Nested grids

Responsive behavior

Use span with an Object of breakpoint-specific keys and number values to enable responsive behavior.

Breakpoints use min-width, where it will also apply your chosen span value to all larger breakpoints.

Column offset

Use start to provide a positioning offset.

Component props

Grid Required

nametypedefaultrequireddescription
as'div'
'section'
'span'
'div'falseThe HTML element used to render the grid.
enableOverlaybooleanfalsefalseVisual aid to help with alignment.
classNamestringfalseSets a custom class on the element.
childrenGrid.Columntrue
idstringfalseSets a custom id attribute.

Grid.Column Required

nametypedefaultrequireddescription
as'div'
'section'
'span'
'div'falseThe HTML element used to render the column.
span1
2
3
4
5
6
7
8
9
10
11
12
ResponsiveMap		12falseThe number of columns the element should span or a responsive map.
start1
2
3
4
5
6
7
8
9
10
11
12
ResponsiveMap		falseThe column index to start the element or a responsive map.
classNamestringfalseSets a custom class on the element
childrenReactElementfalse
idstringfalseSets a custom id