Grid Rows

Define grid template rows

Syntax

layout="grid-rows:[value]"

Values

Value	CSS Output	Description
1-12	grid-template-rows: repeat({n}, minmax(0, 1fr))	N equal rows
none	grid-template-rows: none	No rows defined
subgrid	grid-template-rows: subgrid	Use parent grid

Examples

<div layout="grid grid-rows:3">3 rows</div>

Preview

Grid Rows

layout="grid-rows:3" - Define explicit row tracks in a grid

123456

View Code

<div layout="grid grid-rows:3 grid-cols:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
</div>