@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': patch
+---
+
+fix(fuselage): do not render GridItem for null or boolean children in CardGrid
@@ -1,6 +1,7 @@
 import { composeStories } from '@storybook/react-webpack5';
 import { axe } from 'jest-axe';
 
+import CardGrid from './CardGrid';
 import * as stories from './CardGrid.stories';
 import { render } from '../../testing';
 
@@ -13,4 +14,20 @@ describe('[CardGrid Rendering]', () => {
 		const results = await axe(container);
 		expect(results).toHaveNoViolations();
 	});
+
+	it('does not render GridItem for null, undefined, or boolean children', () => {
+		const { container } = render(
+			<CardGrid>
+				<div>Card 1</div>
+				{null}
+				{undefined}
+				{false}
+				{true}
+				<div>Card 2</div>
+			</CardGrid>,
+		);
+
+		const items = container.querySelectorAll('.rcx-card-grid__item');
+		expect(items).toHaveLength(2);
+	});
 });
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Children } from 'react';
+import { Children, isValidElement } from 'react';
 
 import type { GridItemProps } from '../Grid';
 import { Grid, GridItem } from '../Grid';
@@ -11,8 +11,8 @@ export type CardGridProps = {
 
 const CardGrid = ({ children, breakpoints, ...props }: CardGridProps) => (
 	<Grid rcx-card-grid margin={-8} {...props}>
-		{Children.map(children, (child) => (
-			<GridItem rcx-card-grid__item padding={8} {...breakpoints}>
+		{Children.toArray(children).map((child, index) => (
+			<GridItem key={isValidElement(child) && child.key != null ? child.key : index} rcx-card-grid__item padding={8} {...breakpoints}>
 				{child}
 			</GridItem>
 		))}
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@rocket.chat/fuselage': patch
 +---
++
 +fix(fuselage): do not render GridItem for null or boolean children in CardGrid