Grid Template Areas

Utilities for specifying the template areas in a grid layout.

Usage

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>

Responsive

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.