Grid Column Start / End

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

Spanning columns

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

<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.

<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.