@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/grid-auto-columns.mdx

@@ -0,0 +1,43 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "grid-auto-columns";
+export const description = "Utilities for controlling the size of implicitly-created grid columns.";
+
+<ApiTable
+  rows={[
+    ["auto-cols-auto", "grid-auto-columns: auto;"],
+    ["auto-cols-min", "grid-auto-columns: min-content;"],
+    ["auto-cols-max", "grid-auto-columns: max-content;"],
+    ["auto-cols-fr", "grid-auto-columns: minmax(0, 1fr);"],
+    ["auto-cols-(<custom-property>)", "grid-auto-columns: var(<custom-property>);"],
+    ["auto-cols-[<value>]", "grid-auto-columns: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `auto-cols-min` and `auto-cols-max` to control the size of implicitly-created grid columns:
+
+```html
+<!-- [!code classes:auto-cols-max] -->
+<div class="grid auto-cols-max grid-flow-col">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="auto-cols" name="size of implicitly-created grid columns" value="minmax(0,2fr)" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="grid-auto-columns"
+  defaultClass="grid grid-flow-col auto-cols-max"
+  featuredClass="auto-cols-min"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/grid-auto-flow.mdx

@@ -0,0 +1,58 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "grid-auto-flow";
+export const description = "Utilities for controlling how elements in a grid are auto-placed.";
+
+<ApiTable
+  rows={[
+    ["grid-flow-row", "grid-auto-flow: row;"],
+    ["grid-flow-col", "grid-auto-flow: column;"],
+    ["grid-flow-dense", "grid-auto-flow: dense;"],
+    ["grid-flow-row-dense", "grid-auto-flow: row dense;"],
+    ["grid-flow-col-dense", "grid-auto-flow: column dense;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `grid-flow-col` and `grid-flow-row-dense` to control how the auto-placement algorithm works for a grid layout:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="col-span-2 rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">01</div>
+        <div className="col-span-2 rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">02</div>
+        <div className="rounded-lg bg-purple-500 p-4">03</div>
+        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">04</div>
+        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">05</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grid-flow-row-dense] -->
+<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">
+  <div class="col-span-2">01</div>
+  <div class="col-span-2">02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="grid-auto-flow" defaultClass="grid grid-flow-col" featuredClass="grid-flow-row" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/grid-auto-rows.mdx

@@ -0,0 +1,43 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "grid-auto-rows";
+export const description = "Utilities for controlling the size of implicitly-created grid rows.";
+
+<ApiTable
+  rows={[
+    ["auto-rows-auto", "grid-auto-rows: auto;"],
+    ["auto-rows-min", "grid-auto-rows: min-content;"],
+    ["auto-rows-max", "grid-auto-rows: max-content;"],
+    ["auto-rows-fr", "grid-auto-rows: minmax(0, 1fr);"],
+    ["auto-rows-(<custom-property>)", "grid-auto-rows: var(<custom-property>);"],
+    ["auto-rows-[<value>]", "grid-auto-rows: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `auto-rows-min` and `auto-rows-max` to control the size of implicitly-created grid rows:
+
+```html
+<!-- [!code classes:auto-rows-max] -->
+<div class="grid grid-flow-row auto-rows-max">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="auto-rows" name="size of implicitly-created grid rows" value="minmax(0,2fr)" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="grid-auto-rows"
+  defaultClass="grid grid-flow-row auto-rows-max"
+  featuredClass="auto-rows-min"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/grid-column.mdx

@@ -0,0 +1,124 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "grid-column";
+export const description = "Utilities for controlling how elements are sized and placed across grid columns.";
+
+<ApiTable
+  rows={[
+    ["col-span-<number>", "grid-column: span <number> / span <number>;"],
+    ["col-span-full", "grid-column: 1 / -1;"],
+    ["col-span-(<custom-property>)", "grid-column: span var(<custom-property>) / span var(<custom-property>);"],
+    ["col-span-[<value>]", "grid-column: span <value> / span <value>;"],
+    ["col-start-<number>", "grid-column-start: <number>;"],
+    ["-col-start-<number>", "grid-column-start: calc(<number> * -1);"],
+    ["col-start-auto", "grid-column-start: auto;"],
+    ["col-start-(<custom-property>)", "grid-column-start: var(<custom-property>);"],
+    ["col-start-[<value>]", "grid-column-start: <value>;"],
+    ["col-end-<number>", "grid-column-end: <number>;"],
+    ["-col-end-<number>", "grid-column-end: calc(<number> * -1);"],
+    ["col-end-auto", "grid-column-end: auto;"],
+    ["col-end-(<custom-property>)", "grid-column-end: var(<custom-property>);"],
+    ["col-end-[<value>]", "grid-column-end: <value>;"],
+    ["col-auto", "grid-column: auto;"],
+    ["col-<number>", "grid-column: <number>;"],
+    ["-col-<number>", "grid-column: calc(<number> * -1);"],
+    ["col-(<custom-property>)", "grid-column: var(<custom-property>);"],
+    ["col-[<value>]", "grid-column: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Spanning columns
+
+Use `col-span-<number>` utilities like `col-span-2` and `col-span-4` to make an element span _n_ columns:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-cols-3 gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">01</div>
+        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">02</div>
+        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">03</div>
+        <div className="col-span-2 rounded-lg bg-indigo-500 p-4">04</div>
+        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">05</div>
+        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">06</div>
+        <div className="col-span-2 rounded-lg bg-indigo-500 p-4">07</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:col-span-2] -->
+<div class="grid grid-cols-3 gap-4">
+  <div class="...">01</div>
+  <div class="...">02</div>
+  <div class="...">03</div>
+  <div class="col-span-2 ...">04</div>
+  <div class="...">05</div>
+  <div class="...">06</div>
+  <div class="col-span-2 ...">07</div>
+</div>
+```
+
+</Figure>
+
+### Starting and ending lines
+
+Use `col-start-<number>` or `col-end-<number>` utilities like `col-start-2` and `col-end-3` to make an element start or end at the _nth_ grid line:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-6 gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
+      <Stripes border className="rounded-lg p-4" />
+      <div className="col-span-4 col-start-2 rounded-lg bg-sky-500 p-4">01</div>
+      <Stripes border className="rounded-lg p-4" />
+      <div className="col-start-1 col-end-3 rounded-lg bg-sky-500 p-4">02</div>
+      <Stripes border className="rounded-lg p-4" />
+      <Stripes border className="rounded-lg p-4" />
+      <div className="col-span-2 col-end-7 rounded-lg bg-sky-500 p-4">03</div>
+      <div className="col-start-1 col-end-7 rounded-lg bg-sky-500 p-4">04</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:col-start-1,col-start-2,col-end-3,col-end-7] -->
+<div class="grid grid-cols-6 gap-4">
+  <div class="col-span-4 col-start-2 ...">01</div>
+  <div class="col-start-1 col-end-3 ...">02</div>
+  <div class="col-span-2 col-end-7 ...">03</div>
+  <div class="col-start-1 col-end-7 ...">04</div>
+</div>
+```
+
+</Figure>
+
+These can also be combined with the `col-span-<number>` utilities to span a specific number of columns.
+
+### Using a custom value
+
+<UsingACustomValue
+  utilities={["col", "col-span", "col-start", "col-end"]}
+  variable="columns"
+  name="grid column size and location"
+  value="16_/_span_16"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  properties={["grid-column", "grid-column-start", "grid-column-end"]}
+  defaultClass="col-span-2"
+  featuredClass="col-span-6"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/grid-row.mdx

@@ -0,0 +1,115 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "grid-row";
+export const description = "Utilities for controlling how elements are sized and placed across grid rows.";
+
+<ApiTable
+  rows={[
+    ["row-span-<number>", "grid-row: span <number> / span <number>;"],
+    ["row-span-full", "grid-row: 1 / -1;"],
+    ["row-span-(<custom-property>)", "grid-row: span var(<custom-property>) / span var(<custom-property>);"],
+    ["row-span-[<value>]", "grid-row: span <value> / span <value>;"],
+    ["row-start-<number>", "grid-row-start: <number>;"],
+    ["-row-start-<number>", "grid-row-start: calc(<number> * -1);"],
+    ["row-start-auto", "grid-row-start: auto;"],
+    ["row-start-(<custom-property>)", "grid-row-start: var(<custom-property>);"],
+    ["row-start-[<value>]", "grid-row-start: <value>;"],
+    ["row-end-<number>", "grid-row-end: <number>;"],
+    ["-row-end-<number>", "grid-row-end: calc(<number> * -1);"],
+    ["row-end-auto", "grid-row-end: auto;"],
+    ["row-end-(<custom-property>)", "grid-row-end: var(<custom-property>);"],
+    ["row-end-[<value>]", "grid-row-end: <value>;"],
+    ["row-auto", "grid-row: auto;"],
+    ["row-<number>", "grid-row: <number>;"],
+    ["-row-<number>", "grid-row: calc(<number> * -1);"],
+    ["row-(<custom-property>)", "grid-row: var(<custom-property>);"],
+    ["row-[<value>]", "grid-row: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Spanning rows
+
+Use `row-span-<number>` utilities like `row-span-2` and `row-span-4` to make an element span _n_ rows:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="row-span-3 grid place-content-center rounded-lg bg-fuchsia-500 p-4">01</div>
+        <div className="col-span-2 grid place-content-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          02
+        </div>
+        <div className="col-span-2 row-span-2 grid place-content-center rounded-lg bg-fuchsia-500 p-4">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:row-span-2,row-span-3] -->
+<div class="grid grid-flow-col grid-rows-3 gap-4">
+  <div class="row-span-3 ...">01</div>
+  <div class="col-span-2 ...">02</div>
+  <div class="col-span-2 row-span-2 ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Starting and ending lines
+
+Use `row-start-<number>` or `row-end-<number>` utilities like `row-start-2` and `row-end-3` to make an element start or end at the _nth_ grid line:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="row-span-2 row-start-2 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">01</div>
+        <div className="row-span-2 row-end-3 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">02</div>
+        <div className="row-start-1 row-end-4 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:row-start-1,row-start-2,row-end-3,row-end-4] -->
+<div class="grid grid-flow-col grid-rows-3 gap-4">
+  <div class="row-span-2 row-start-2 ...">01</div>
+  <div class="row-span-2 row-end-3 ...">02</div>
+  <div class="row-start-1 row-end-4 ...">03</div>
+</div>
+```
+
+</Figure>
+
+These can also be combined with the `row-span-<number>` utilities to span a specific number of rows.
+
+### Using a custom value
+
+<UsingACustomValue
+  utilities={["row", "row-span", "row-start", "row-end"]}
+  variable="rows"
+  name="grid row size and location"
+  value="span_16_/_span_16"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  properties={["grid-row", "grid-row-start", "grid-row-end"]}
+  defaultClass="row-span-3"
+  featuredClass="row-span-4"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/grid-template-columns.mdx

@@ -0,0 +1,101 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "grid-template-columns";
+export const description = "Utilities for specifying the columns in a grid layout.";
+
+<ApiTable
+  rows={[
+    ["grid-cols-<number>", "grid-template-columns: repeat(<number>, minmax(0, 1fr));"],
+    ["grid-cols-none", "grid-template-columns: none;"],
+    ["grid-cols-subgrid", "grid-template-columns: subgrid;"],
+    ["grid-cols-[<value>]", "grid-template-columns: <value>;"],
+    ["grid-cols-(<custom-property>)", "grid-template-columns: var(<custom-property>);"],
+  ]}
+/>
+
+## Examples
+
+### Specifying the grid columns
+
+Use `grid-cols-<number>` utilities like `grid-cols-2` and `grid-cols-4` to create grids with _n_ equally sized columns:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-cols-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-fuchsia-500 p-4">01</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">02</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">03</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">04</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">05</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">06</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">07</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">08</div>
+        <div className="rounded-lg bg-fuchsia-500 p-4">09</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grid-cols-4] -->
+<div class="grid grid-cols-4 gap-4">
+  <div>01</div>
+  <!-- ... -->
+  <div>09</div>
+</div>
+```
+
+</Figure>
+
+### Implementing a subgrid
+
+Use the `grid-cols-subgrid` utility to adopt the column tracks defined by the item's parent:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">01</div>
+      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">02</div>
+      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">03</div>
+      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">04</div>
+      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">05</div>
+      <div className="col-span-3 grid grid-cols-subgrid gap-4">
+        <Stripes border className="rounded-lg p-4" />
+        <div className="rounded-lg bg-pink-500 p-4">06</div>
+        <Stripes border className="rounded-lg p-4" />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grid-cols-subgrid] -->
+<div class="grid grid-cols-4 gap-4">
+  <div>01</div>
+  <!-- ... -->
+  <div>05</div>
+  <div class="col-span-3 grid grid-cols-subgrid gap-4">
+    <div class="col-start-2">06</div>
+  </div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="grid-cols" name="columns" value="200px_minmax(900px,_1fr)_100px" />
+
+### Responsive design
+
+<ResponsiveDesign property="grid-template-columns" defaultClass="grid grid-cols-1" featuredClass="grid-cols-6" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/grid-template-rows.mdx

@@ -0,0 +1,108 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "grid-template-rows";
+export const description = "Utilities for specifying the rows in a grid layout.";
+
+<ApiTable
+  rows={[
+    ["grid-rows-<number>", "grid-template-rows: repeat(<number>, minmax(0, 1fr));"],
+    ["grid-rows-none", "grid-template-rows: none;"],
+    ["grid-rows-subgrid", "grid-template-rows: subgrid;"],
+    ["grid-rows-[<value>]", "grid-template-rows: <value>;"],
+    ["grid-rows-(<custom-property>)", "grid-template-rows: var(<custom-property>);"],
+  ]}
+/>
+
+## Examples
+
+### Specifying the grid rows
+
+Use `grid-rows-<number>` utilities like `grid-rows-2` and `grid-rows-4` to create grids with _n_ equally sized rows:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-pink-500 p-4">01</div>
+        <div className="rounded-lg bg-pink-500 p-4">02</div>
+        <div className="rounded-lg bg-pink-500 p-4">03</div>
+        <div className="rounded-lg bg-pink-500 p-4">04</div>
+        <div className="rounded-lg bg-pink-500 p-4">05</div>
+        <div className="rounded-lg bg-pink-500 p-4">06</div>
+        <div className="rounded-lg bg-pink-500 p-4">07</div>
+        <div className="rounded-lg bg-pink-500 p-4">08</div>
+        <div className="rounded-lg bg-pink-500 p-4">09</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grid-rows-4] -->
+<div class="grid grid-flow-col grid-rows-4 gap-4">
+  <div>01</div>
+  <!-- ... -->
+  <div>09</div>
+</div>
+```
+
+</Figure>
+
+### Implementing a subgrid
+
+Use the `grid-rows-subgrid` utility to adopt the row tracks defined by the item's parent:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-flow-col grid-rows-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">01</div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">02</div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">03</div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">04</div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">05</div>
+      <div className="row-span-3 grid grid-rows-subgrid gap-4">
+        <Stripes border className="h-14 rounded-lg" />
+        <div className="grid h-14 items-center justify-center rounded-lg bg-fuchsia-500">06</div>
+        <Stripes border className="h-14 rounded-lg" />
+      </div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">07</div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">08</div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">09</div>
+      <div className="grid h-14 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-900">10</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grid-rows-subgrid] -->
+<div class="grid grid-flow-col grid-rows-4 gap-4">
+  <div>01</div>
+  <!-- ... -->
+  <div>05</div>
+  <div class="row-span-3 grid grid-rows-subgrid gap-4">
+    <div class="row-start-2">06</div>
+  </div>
+  <div>07</div>
+  <!-- ... -->
+  <div>10</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="grid-rows" name="rows" value="200px_minmax(900px,1fr)_100px" />
+
+### Responsive design
+
+<ResponsiveDesign property="grid-template-rows" defaultClass="grid grid-rows-2" featuredClass="grid-rows-6" />