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};

Usage

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

<> <template preview> <x.div display="grid" gridTemplateColumns={3} gap={4} gridTemplateAreas='"a a a" "b b c"' > <x.div gridArea="a" h={12} borderRadius="md" bg="fuchsia-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > A </x.div> <x.div gridArea="b" h={12} borderRadius="md" bg="fuchsia-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > B </x.div> <x.div gridArea="c" h={12} borderRadius="md" bg="fuchsia-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > C </x.div> </x.div> </template> <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.

Edit this page on GitHub