row-span-* stretches items across rows — magazine layouts. This family contains 41 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
row-span-1grid-row: span 1 / span 1;
row-span-2grid-row: span 2 / span 2;
row-span-3grid-row: span 3 / span 3;
row-span-4grid-row: span 4 / span 4;
row-span-5grid-row: span 5 / span 5;
row-span-6grid-row: span 6 / span 6;
row-span-7grid-row: span 7 / span 7;
row-span-8grid-row: span 8 / span 8;
row-span-9grid-row: span 9 / span 9;
row-span-10grid-row: span 10 / span 10;
row-span-11grid-row: span 11 / span 11;
row-span-12grid-row: span 12 / span 12;
row-span-fullgrid-row: 1 / -1;
row-start-1grid-row-start: 1;
row-start-2grid-row-start: 2;
row-start-3grid-row-start: 3;
row-start-4grid-row-start: 4;
row-start-5grid-row-start: 5;
row-start-6grid-row-start: 6;
row-start-7grid-row-start: 7;
row-start-8grid-row-start: 8;
row-start-9grid-row-start: 9;
row-start-10grid-row-start: 10;
row-start-11grid-row-start: 11;
row-start-12grid-row-start: 12;
row-start-13grid-row-start: 13;
row-start-autogrid-row-start: auto;
row-end-1grid-row-end: 1;
row-end-2grid-row-end: 2;
row-end-3grid-row-end: 3;
row-end-4grid-row-end: 4;
row-end-5grid-row-end: 5;
row-end-6grid-row-end: 6;
row-end-7grid-row-end: 7;
row-end-8grid-row-end: 8;
row-end-9grid-row-end: 9;
row-end-10grid-row-end: 10;
row-end-11grid-row-end: 11;
row-end-12grid-row-end: 12;
row-end-13grid-row-end: 13;
row-end-autogrid-row-end: auto;

Example#

example
html
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div class="row-span-2">Tall feature</div>
  <div>a</div><div>b</div><div>c</div><div>d</div>
</div>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

utilities/flexbox/flex-direction|Flexbox · utilities/spacing/gap|Gap