Grid Column Start / End

Utilities for controlling how elements are sized and placed across grid columns.

React propsCSS Properties
gridColumn={value}grid-column: {value};

Spanning columns

Use the gridColumn="span n / span n" utilities to make an element span n columns.

<> <template preview> <x.div display="grid" gridTemplateColumns={3} gap={4}> {Array.from({ length: 7 }, (_, index) => index + 1).map((value) => ( <x.div key={value} h={12} borderRadius="md" bg={value === 4 || value === 7 ? 'violet-500' : 'violet-400'} color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" gridColumn={value === 4 || value === 7 ? 'span 2 / span 2' : ''} > {value} </x.div> ))} </x.div> </template> <x.div display="grid" gridTemplateColumns={3} gap={4}> <x.div>1</x.div> <x.div>2</x.div> <x.div>3</x.div> <x.div gridColumn="span 2 / span 2">4</x.div> <x.div>5</x.div> <x.div>6</x.div> <x.div gridColumn="span 2 / span 2">7</x.div> </x.div> </>

Starting and ending lines

Use the gridColumn="n" (start) and gridColumn="auto / n" (end) utilities to make an element start or end at the nth grid line. These can also be combined with the gridColumn="n / span x" (start) and gridColumn="span x / n" (end) utilities to span a specific number of columns.

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

<> <template preview> <x.div display="grid" gridTemplateColumns={6} gap={4}> <x.div h={12} borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" gridColumn="2 / span 4" > 1 </x.div> <x.div h={12} borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" gridColumn="1 / 3" > 2 </x.div> <x.div h={12} borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" gridColumn="span 2 / 7" > 3 </x.div> <x.div h={12} borderRadius="md" bg="emerald-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" gridColumn="1 / 7" > 4 </x.div> </x.div> </template> <x.div display="grid" gridTemplateColumns={6} gap={4}> <x.div gridColumn="2 / span 4">1</x.div> <x.div gridColumn="1 / 3">2</x.div> <x.div gridColumn="span 2 / 7">3</x.div> <x.div gridColumn="1 / 7">4</x.div> </x.div> </>

Responsive

To control the column placement of an element at a specific breakpoint, use responsive object notation. For example, adding the property gridColumn={{ md: "span 2 / span 2" }} to an element would apply the gridColumn="span 2 / span 2" utility at medium screen sizes and above.

<x.div display="grid" gridColumn={{ md: 'span 2 / span 2' }}> {/* ... */} </x.div>

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

Edit this page on GitHub