diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.js b/docs/data/data-grid/column-groups/GroupHeaderHeight.js
new file mode 100644
index 0000000000000..fa1a96d07cb8c
--- /dev/null
+++ b/docs/data/data-grid/column-groups/GroupHeaderHeight.js
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+const columns = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel = [
+  {
+    groupId: 'Internal',
+    description: '',
+    children: [{ field: 'id' }],
+  },
+  {
+    groupId: 'Basic info',
+    children: [
+      {
+        groupId: 'Full name',
+        children: [{ field: 'lastName' }, { field: 'firstName' }],
+      },
+      { field: 'age' },
+    ],
+  },
+];
+
+export default function GroupHeaderHeight() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        columnGroupingModel={columnGroupingModel}
+        columnGroupHeaderHeight={36}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx
new file mode 100644
index 0000000000000..d7099b807d89e
--- /dev/null
+++ b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  {
+    field: 'firstName',
+    headerName: 'First name',
+    width: 150,
+  },
+  {
+    field: 'lastName',
+    headerName: 'Last name',
+    width: 150,
+  },
+  {
+    field: 'age',
+    headerName: 'Age',
+    type: 'number',
+    width: 110,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+const columnGroupingModel: GridColumnGroupingModel = [
+  {
+    groupId: 'Internal',
+    description: '',
+    children: [{ field: 'id' }],
+  },
+  {
+    groupId: 'Basic info',
+    children: [
+      {
+        groupId: 'Full name',
+        children: [{ field: 'lastName' }, { field: 'firstName' }],
+      },
+      { field: 'age' },
+    ],
+  },
+];
+
+export default function GroupHeaderHeight() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        columnGroupingModel={columnGroupingModel}
+        columnGroupHeaderHeight={36}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview
new file mode 100644
index 0000000000000..fc265d72c8e5b
--- /dev/null
+++ b/docs/data/data-grid/column-groups/GroupHeaderHeight.tsx.preview
@@ -0,0 +1,6 @@
+<DataGrid
+  rows={rows}
+  columns={columns}
+  columnGroupingModel={columnGroupingModel}
+  columnGroupHeaderHeight={36}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/column-groups/column-groups.md b/docs/data/data-grid/column-groups/column-groups.md
index 52e09aab871b7..92df9c0b5e100 100644
--- a/docs/data/data-grid/column-groups/column-groups.md
+++ b/docs/data/data-grid/column-groups/column-groups.md
@@ -57,6 +57,14 @@ In addition to the required `groupId` and `children`, you can use the following
 
 {{"demo": "CustomizationDemo.js", "bg": "inline"}}
 
+## Group header height
+
+By default, column group headers are the same height as [column headers](/x/react-data-grid/column-header/#header-height). This will be the default 56 pixels or a custom value set with the `columnHeaderHeight` prop.
+
+The `columnGroupHeaderHeight` prop can be used to size column group headers independently of column headers.
+
+{{"demo": "GroupHeaderHeight.js", "bg": "inline"}}
+
 ## Column reordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 By default, the columns that are part of a group cannot be dragged to outside their group.
diff --git a/docs/data/data-grid/column-header/HeaderHeight.js b/docs/data/data-grid/column-header/HeaderHeight.js
new file mode 100644
index 0000000000000..7506e7b7a448a
--- /dev/null
+++ b/docs/data/data-grid/column-header/HeaderHeight.js
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+const rows = [
+  {
+    id: 1,
+    username: '@MUI',
+    age: 20,
+  },
+];
+
+const columns = [
+  {
+    field: 'username',
+    headerName: 'Username',
+    description:
+      'The identification used by the person with access to the online service.',
+  },
+  { field: 'age', headerName: 'Age' },
+];
+
+export default function HeaderHeight() {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-header/HeaderHeight.tsx b/docs/data/data-grid/column-header/HeaderHeight.tsx
new file mode 100644
index 0000000000000..02c2a742828b9
--- /dev/null
+++ b/docs/data/data-grid/column-header/HeaderHeight.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+
+const rows = [
+  {
+    id: 1,
+    username: '@MUI',
+    age: 20,
+  },
+];
+
+const columns: GridColDef[] = [
+  {
+    field: 'username',
+    headerName: 'Username',
+    description:
+      'The identification used by the person with access to the online service.',
+  },
+  { field: 'age', headerName: 'Age' },
+];
+
+export default function HeaderHeight() {
+  return (
+    <div style={{ height: 250, width: '100%' }}>
+      <DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/column-header/HeaderHeight.tsx.preview b/docs/data/data-grid/column-header/HeaderHeight.tsx.preview
new file mode 100644
index 0000000000000..0c42a351d4cff
--- /dev/null
+++ b/docs/data/data-grid/column-header/HeaderHeight.tsx.preview
@@ -0,0 +1 @@
+<DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />
\ No newline at end of file
diff --git a/docs/data/data-grid/column-header/column-header.md b/docs/data/data-grid/column-header/column-header.md
index 332ece76cfd97..063b7a02089a2 100644
--- a/docs/data/data-grid/column-header/column-header.md
+++ b/docs/data/data-grid/column-header/column-header.md
@@ -34,6 +34,14 @@ const columns: GridColDef[] = [
 
 {{"demo": "RenderHeaderGrid.js", "bg": "inline"}}
 
+## Header height
+
+By default, column headers have a height of 56 pixels. This matches the height from the [Material Design guidelines](https://m2.material.io/components/data-tables).
+
+The `columnHeaderHeight` prop can be used to override the default value.
+
+{{"demo": "HeaderHeight.js", "bg": "inline"}}
+
 ## Styling header
 
 You can check the [styling header](/x/react-data-grid/style/#styling-column-headers) section for more information.
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 6f4425ee64e0c..d3fdac4d0e2b8 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -33,6 +33,7 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
     "columnBufferPx": { "type": { "name": "number" }, "default": "150" },
+    "columnGroupHeaderHeight": { "type": { "name": "number" } },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" },
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index c5dc3bdb06897..8cb47ee673117 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -22,6 +22,7 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
     "columnBufferPx": { "type": { "name": "number" }, "default": "150" },
+    "columnGroupHeaderHeight": { "type": { "name": "number" } },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" },
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index c2ecd48ba5129..49024a68e2dca 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -21,6 +21,7 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" },
     "columnBufferPx": { "type": { "name": "number" }, "default": "150" },
+    "columnGroupHeaderHeight": { "type": { "name": "number" } },
     "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" },
     "columnVisibilityModel": { "type": { "name": "object" } },
     "density": {
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index 14ba9f92d7615..5db73ea059f6e 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -39,6 +39,9 @@
     "columnBufferPx": {
       "description": "Column region in pixels to render before/after the viewport"
     },
+    "columnGroupHeaderHeight": {
+      "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the <code>columnHeaderHeight</code> value if not set."
+    },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 48b01e763008f..b763e3504c5db 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -32,6 +32,9 @@
     "columnBufferPx": {
       "description": "Column region in pixels to render before/after the viewport"
     },
+    "columnGroupHeaderHeight": {
+      "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the <code>columnHeaderHeight</code> value if not set."
+    },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 2dbdafe6a5944..c8df41f22856e 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -29,6 +29,9 @@
     "columnBufferPx": {
       "description": "Column region in pixels to render before/after the viewport"
     },
+    "columnGroupHeaderHeight": {
+      "description": "Sets the height in pixels of the column group headers in the Data Grid. Inherits the <code>columnHeaderHeight</code> value if not set."
+    },
     "columnHeaderHeight": {
       "description": "Sets the height in pixel of the column headers in the Data Grid."
     },
diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
index a12cc70e9e525..31603ed8ddef6 100644
--- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
+++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -170,6 +170,11 @@ DataGridPremiumRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
index 915fede52e671..54c650ccc9138 100644
--- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
+++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -148,6 +148,11 @@ DataGridProRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx
index 771ebed3e7c5f..b23f085214d34 100644
--- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx
+++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -152,6 +152,11 @@ DataGridRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx
index 54317be883442..03c8b20797fc8 100644
--- a/packages/x-data-grid/src/components/GridRow.tsx
+++ b/packages/x-data-grid/src/components/GridRow.tsx
@@ -511,6 +511,7 @@ GridRow.propTypes = {
       height: PropTypes.number.isRequired,
       width: PropTypes.number.isRequired,
     }).isRequired,
+    groupHeaderHeight: PropTypes.number.isRequired,
     hasScrollX: PropTypes.bool.isRequired,
     hasScrollY: PropTypes.bool.isRequired,
     headerFilterHeight: PropTypes.number.isRequired,
diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
index 6d128470df869..e52267e0916d0 100644
--- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
+++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -456,7 +456,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           depth={depth}
           isLastColumn={headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length}
           maxDepth={headerGroupingMaxDepth}
-          height={dimensions.headerHeight}
+          height={dimensions.groupHeaderHeight}
           hasFocus={hasFocus}
           tabIndex={tabIndex}
           pinnedPosition={pinnedPosition}
diff --git a/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts
index c7b5bdd3815c5..9c7e20470eeba 100644
--- a/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts
+++ b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts
@@ -62,6 +62,10 @@ export interface GridDimensions {
    * Height of one column header.
    */
   headerHeight: number;
+  /**
+   * Height of one column group header.
+   */
+  groupHeaderHeight: number;
   /**
    * Height of header filters.
    */
diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
index bf8cf2ac6ff8f..64668b34fda46 100644
--- a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
+++ b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -42,6 +42,7 @@ type RootProps = Pick<
   | 'rowHeight'
   | 'resizeThrottleMs'
   | 'columnHeaderHeight'
+  | 'columnGroupHeaderHeight'
   | 'headerFilterHeight'
 >;
 
@@ -59,6 +60,7 @@ const EMPTY_DIMENSIONS: GridDimensions = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  groupHeaderHeight: 0,
   headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
@@ -92,6 +94,9 @@ export function useGridDimensions(
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const groupHeaderHeight = Math.floor(
+    (props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor,
+  );
   const headerFilterHeight = Math.floor(
     (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor,
   );
@@ -248,6 +253,7 @@ export function useGridDimensions(
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      groupHeaderHeight,
       headerFilterHeight,
       rowWidth,
       rowHeight,
@@ -275,6 +281,7 @@ export function useGridDimensions(
     rowsMeta.currentPageTotalHeight,
     rowHeight,
     headerHeight,
+    groupHeaderHeight,
     headerFilterHeight,
     columnsTotalWidth,
     headersTotalHeight,
diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts
index a507eaaf5d4fd..8b57c7b8915b7 100644
--- a/packages/x-data-grid/src/models/props/DataGridProps.ts
+++ b/packages/x-data-grid/src/models/props/DataGridProps.ts
@@ -785,6 +785,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    */
   onProcessRowUpdateError?: (error: any) => void;
   columnGroupingModel?: GridColumnGroupingModel;
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight?: number;
   /**
    * Callback called when the data is copied to the clipboard.
    * @param {string} data The data copied to the clipboard.