Skip to content

Add support for autoRows #302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aamirkhan-91 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add support for autoRows #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
720f66e
Add autoRows and autoColumns props
aamirkhan-91 Nov 17, 2025
b114f9e
Add docs, remove autoColumns
aamirkhan-91 Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 140 additions & 0 deletions src/docs/pages/grid/GridAutoRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import { VuiGrid, VuiGridItem, VuiCard, VuiText, VuiSpacer, VuiTitle } from "../../../lib";

export const GridAutoRows = () => {
const longContent = (
<>
<VuiText>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</VuiText>
<VuiSpacer size="s" />
<VuiText>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
</VuiText>
<VuiSpacer size="s" />
<VuiText>
<p>
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</VuiText>
<VuiSpacer size="s" />
<VuiText>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</VuiText>
</>
);

return (
<>
<VuiTitle size="s">
<h3>Grid with autoRows="200px"</h3>
</VuiTitle>

<VuiSpacer size="m" />

<VuiText>
<p>
This grid uses autoRows="200px" to set a fixed height of 200px for all implicitly created rows. Notice how all
rows have the same height regardless of content, and cards with long content become scrollable. This becomes
particularly relevant as the number of rows increases as the size of the container gets smaller.
</p>
</VuiText>

<VuiSpacer size="m" />

<VuiGrid
templateColumns={{
sm: "1fr",
md: "repeat(2, 1fr)",
lg: "repeat(3, 1fr)"
}}
spacing="m"
autoRows="200px"
>
<VuiGridItem>
<VuiCard fullHeight isScrollable padding="m" header={<VuiText size="m">Card 1</VuiText>} body={longContent} />
</VuiGridItem>

<VuiGridItem>
<VuiCard
fullHeight
isScrollable
padding="m"
header={<VuiText size="m">Card 2</VuiText>}
body={
<VuiText>
<p>Short content in this card.</p>
</VuiText>
}
/>
</VuiGridItem>

<VuiGridItem>
<VuiCard fullHeight isScrollable padding="m" header={<VuiText size="m">Card 3</VuiText>} body={longContent} />
</VuiGridItem>
</VuiGrid>

<VuiSpacer size="l" />

<VuiTitle size="s">
<h3>Grid without autoRows</h3>
</VuiTitle>

<VuiSpacer size="m" />

<VuiText>
<p>
This grid has no autoRows value set. Notice how on larger containers, the cards have the same height (thanks
to templateRows="200px") but as the container gets smaller, the newly created rows don't adhere to a fixed
height.
</p>
</VuiText>

<VuiSpacer size="m" />

<VuiGrid
templateColumns={{
sm: "1fr",
md: "repeat(2, 1fr)",
lg: "repeat(3, 1fr)"
}}
templateRows="200px"
spacing="m"
>
<VuiGridItem>
<VuiCard fullHeight isScrollable padding="m" header={<VuiText size="m">Card 1</VuiText>} body={longContent} />
</VuiGridItem>

<VuiGridItem>
<VuiCard
fullHeight
isScrollable
padding="m"
header={<VuiText size="m">Card 2</VuiText>}
body={
<VuiText>
<p>Short content in this card.</p>
</VuiText>
}
/>
</VuiGridItem>

<VuiGridItem>
<VuiCard fullHeight isScrollable padding="m" header={<VuiText size="m">Card 3</VuiText>} body={longContent} />
</VuiGridItem>
</VuiGrid>
</>
);
};
7 changes: 7 additions & 0 deletions src/docs/pages/grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import { GridSpanning } from "./GridSpanning";
import { GridSimple } from "./GridSimple";
import { GridAlignment } from "./GridAlignment";
import { GridResponsive } from "./GridResponsive";
import { GridAutoRows } from "./GridAutoRows";

const GridSource = require("!!raw-loader!./Grid");
const GridSpanningSource = require("!!raw-loader!./GridSpanning");
const GridSimpleSource = require("!!raw-loader!./GridSimple");
const GridAlignmentSource = require("!!raw-loader!./GridAlignment");
const GridResponsiveSource = require("!!raw-loader!./GridResponsive");
const GridAutoRowsSource = require("!!raw-loader!./GridAutoRows");

export const grid = {
name: "Grid",
Expand Down Expand Up @@ -38,6 +40,11 @@ export const grid = {
name: "Responsive columns",
component: <GridResponsive />,
source: GridResponsiveSource.default.toString()
},
{
name: "Auto rows",
component: <GridAutoRows />,
source: GridAutoRowsSource.default.toString()
}
]
};
44 changes: 29 additions & 15 deletions src/lib/components/grid/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,7 @@ type GridAlignItems = (typeof GRID_ALIGN_ITEMS)[number];
const GRID_JUSTIFY_ITEMS = ["start", "end", "center", "stretch"] as const;
type GridJustifyItems = (typeof GRID_JUSTIFY_ITEMS)[number];

const GRID_ALIGN_CONTENT = [
"start",
"end",
"center",
"stretch",
"spaceAround",
"spaceBetween",
"spaceEvenly"
] as const;
const GRID_ALIGN_CONTENT = ["start", "end", "center", "stretch", "spaceAround", "spaceBetween", "spaceEvenly"] as const;
type GridAlignContent = (typeof GRID_ALIGN_CONTENT)[number];

const GRID_JUSTIFY_CONTENT = [
Expand Down Expand Up @@ -75,6 +67,7 @@ type Props = {
spacing?: FlexSpacing;
templateColumns?: ResponsiveGridValue<string>;
templateRows?: string;
autoRows?: ResponsiveGridValue<string>;
alignItems?: GridAlignItems;
justifyItems?: GridJustifyItems;
alignContent?: GridAlignContent;
Expand All @@ -90,6 +83,7 @@ export const VuiGrid = ({
spacing = "m",
templateColumns,
templateRows,
autoRows,
alignItems,
justifyItems,
alignContent,
Expand All @@ -99,10 +93,10 @@ export const VuiGrid = ({
className,
...rest
}: Props) => {

const classes = classNames("vuiGridContainer", className);

const isResponsiveTemplateColumns = templateColumns && typeof templateColumns === "object";
const isResponsiveAutoRows = autoRows && typeof autoRows === "object";

const contentClasses = classNames(
"vuiGrid",
Expand All @@ -111,7 +105,8 @@ export const VuiGrid = ({
[`vuiGrid--columns${columns}`]: !templateColumns && columns,
"vuiGrid--inline": inline,
"vuiGrid--fullWidth": fullWidth,
"vuiGrid--responsive": isResponsiveTemplateColumns
"vuiGrid--responsive": isResponsiveTemplateColumns,
"vuiGrid--responsiveAutoRows": isResponsiveAutoRows
},
alignItems && alignItemsClassMap[alignItems],
justifyItems && justifyItemsClassMap[justifyItems],
Expand Down Expand Up @@ -148,12 +143,31 @@ export const VuiGrid = ({
gridStyle.gridTemplateRows = templateRows;
}

if (autoRows) {
if (typeof autoRows === "string") {
gridStyle.gridAutoRows = autoRows;
} else {
// Implement cascading: each breakpoint inherits from the previous if not defined
const defaultValue = autoRows.default;
const smValue = autoRows.sm || defaultValue;
const mdValue = autoRows.md || smValue;
const lgValue = autoRows.lg || mdValue;

if (smValue) {
gridStyle["--grid-auto-rows-sm"] = smValue;
}
if (mdValue) {
gridStyle["--grid-auto-rows-md"] = mdValue;
}
if (lgValue) {
gridStyle["--grid-auto-rows-lg"] = lgValue;
}
}
}

return (
<div className={classes} {...rest}>
<div
className={contentClasses}
style={Object.keys(gridStyle).length > 0 ? gridStyle : undefined}
>
<div className={contentClasses} style={Object.keys(gridStyle).length > 0 ? gridStyle : undefined}>
{children}
</div>
</div>
Expand Down
14 changes: 14 additions & 0 deletions src/lib/components/grid/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,20 @@ $spacing: (
}
}

// Responsive grid auto rows using CSS custom properties
.vuiGrid--responsiveAutoRows {
// Small (applies from 0px up - default/mobile-first)
grid-auto-rows: var(--grid-auto-rows-sm);

@container (width > 500px) {
grid-auto-rows: var(--grid-auto-rows-md);
}

@container (width > 800px) {
grid-auto-rows: var(--grid-auto-rows-lg);
}
}

// Alignment - align-items
.vuiGrid--alignItemsStart {
align-items: start;
Expand Down