Grid Row Start / End

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

Spanning rows

Use the gridRow="span n / span n" utilities to make an element span n rows.

<x.div display="grid" gridTemplateColumns={3} gap={4}>
  <x.div gridRow="span 3 / span 3">1</x.div>
  <x.div gridColumn="span 2 / span 2">2</x.div>
  <x.div gridColumn="span 2 / span 2" gridRow="span 2 / span 2">
    3
  </x.div>
</x.div>

Starting and ending lines

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

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" gridTemplateRows={3} gridAutoFlow="column" gap={4}>
  <x.div gridRow="2 / span 2">1</x.div>
  <x.div gridRow="span 2 / 3">2</x.div>
  <x.div gridRow="1 / 4">3</x.div>
</x.div>

Responsive

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

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

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