diff --git a/.changeset/flex-html-attributes.md b/.changeset/flex-html-attributes.md
deleted file mode 100644
index 882594deba..0000000000
--- a/.changeset/flex-html-attributes.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@backstage/ui': patch
----
-
-Added support for native HTML div attributes on the `Flex` component.
-
-**Affected components:** Flex
diff --git a/.changeset/layout-html-attributes.md b/.changeset/layout-html-attributes.md
new file mode 100644
index 0000000000..6dff67e7f1
--- /dev/null
+++ b/.changeset/layout-html-attributes.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added support for native HTML div attributes on the `Flex`, `Grid`, and `Grid.Item` components.
+
+**Affected components:** Flex, Grid, Grid.Item
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index d584031c7a..afda04ea5a 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -20,6 +20,7 @@ import type { DisclosureProps } from 'react-aria-components';
import type { ElementType } from 'react';
import { ForwardRefExoticComponent } from 'react';
import type { HeadingProps } from 'react-aria-components';
+import type { HTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import type { LinkProps as LinkProps_2 } from 'react-aria-components';
import type { ListBoxItemProps } from 'react-aria-components';
@@ -1333,7 +1334,9 @@ export type GridItemOwnProps = {
};
// @public (undocumented)
-export interface GridItemProps extends GridItemOwnProps {
+export interface GridItemProps
+ extends GridItemOwnProps,
+ Omit, 'children'> {
// (undocumented)
colEnd?: Responsive;
// (undocumented)
@@ -1353,7 +1356,10 @@ export type GridOwnProps = {
};
// @public (undocumented)
-export interface GridProps extends SpaceProps, GridOwnProps {
+export interface GridProps
+ extends SpaceProps,
+ GridOwnProps,
+ Omit, 'children'> {
// (undocumented)
columns?: Responsive;
// (undocumented)
diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx
index 8d000c0925..f61cd67d6b 100644
--- a/packages/ui/src/components/Grid/Grid.tsx
+++ b/packages/ui/src/components/Grid/Grid.tsx
@@ -20,7 +20,7 @@ import { useDefinition } from '../../hooks/useDefinition';
import { GridDefinition, GridItemDefinition } from './definition';
const GridRoot = forwardRef((props, ref) => {
- const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+ const { ownProps, dataAttributes, utilityStyle, restProps } = useDefinition(
GridDefinition,
{ columns: 'auto', gap: '4', ...props },
);
@@ -32,6 +32,7 @@ const GridRoot = forwardRef((props, ref) => {
className={classes.root}
style={{ ...utilityStyle, ...ownProps.style }}
{...dataAttributes}
+ {...restProps}
>
{childrenWithBgProvider}
@@ -39,7 +40,7 @@ const GridRoot = forwardRef((props, ref) => {
});
const GridItem = forwardRef((props, ref) => {
- const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+ const { ownProps, dataAttributes, utilityStyle, restProps } = useDefinition(
GridItemDefinition,
props,
);
@@ -51,6 +52,7 @@ const GridItem = forwardRef((props, ref) => {
className={classes.root}
style={{ ...utilityStyle, ...ownProps.style }}
{...dataAttributes}
+ {...restProps}
>
{childrenWithBgProvider}
diff --git a/packages/ui/src/components/Grid/types.ts b/packages/ui/src/components/Grid/types.ts
index c5fb713d17..6ad5d564c6 100644
--- a/packages/ui/src/components/Grid/types.ts
+++ b/packages/ui/src/components/Grid/types.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import type { ReactNode, CSSProperties } from 'react';
+import type { ReactNode, CSSProperties, HTMLAttributes } from 'react';
import type {
Space,
SpaceProps,
@@ -32,7 +32,10 @@ export type GridOwnProps = {
};
/** @public */
-export interface GridProps extends SpaceProps, GridOwnProps {
+export interface GridProps
+ extends SpaceProps,
+ GridOwnProps,
+ Omit, 'children'> {
columns?: Responsive;
gap?: Responsive;
}
@@ -46,7 +49,9 @@ export type GridItemOwnProps = {
};
/** @public */
-export interface GridItemProps extends GridItemOwnProps {
+export interface GridItemProps
+ extends GridItemOwnProps,
+ Omit, 'children'> {
colSpan?: Responsive;
colEnd?: Responsive;
colStart?: Responsive;