Grid Template Areas

Utilities for specifying the template areas in a grid layout.

React propsCSS Properties
gridTemplateAreas={template}grid-template-areas: {template};
gridArea={template}grid-area: {template};


Use the gridTemplateAreas={value} utilities to specify area positions in grids.

<x.div display="grid" gridTemplateColumns={3} gridTemplateAreas='"a a a" "b b c"' > <x.div gridArea="a">A</x.div> <x.div gridArea="b">B</x.div> <x.div gridArea="c">C</x.div> </x.div>


To control the grid template areas at a specific breakpoint, use responsive object notation. For example, adding the property gridTemplateAreas={{ md: '"header header"' }} to an element would apply the gridTemplateAreas='"header header"' utility at medium screen sizes and above.

<x.div display="grid" gridTemplateAreas={{ md: '"header header"' }}> {/* ... */} </x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub