grid-rows-1…12 and arbitrary row templates. This family contains 14 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10grid-template-rows: repeat(10, minmax(0, 1fr));
grid-rows-11grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-nonegrid-template-rows: none;
grid-rows-subgridgrid-template-rows: subgrid;

Example#

example
html
<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">Header / main / footer</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.

Best practices#

  • grid-rows-[auto_1fr_auto] = the app-shell grid

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