diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 4cd3d83dd2..7c325a178c 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -104,6 +104,8 @@ export interface DataGridProps<R, SR = unknown> extends SharedDivProps {
   headerRowHeight?: number;
   /** The height of the header filter row in pixels */
   headerFiltersHeight?: number;
+  /** The height of each summary row in pixels */
+  summaryRowHeight?: number;
 
   /**
    * Feature props
@@ -179,6 +181,7 @@ function DataGrid<R, SR>({
   rowHeight = 35,
   headerRowHeight = rowHeight,
   headerFiltersHeight = 45,
+  summaryRowHeight = rowHeight,
   // Feature props
   selectedRows,
   onSelectedRowsChange,
@@ -250,7 +253,7 @@ function DataGrid<R, SR>({
   const headerRowsCount = enableFilterRow ? 2 : 1;
   const summaryRowsCount = summaryRows?.length ?? 0;
   const totalHeaderHeight = headerRowHeight + (enableFilterRow ? headerFiltersHeight : 0);
-  const clientHeight = gridHeight - totalHeaderHeight - summaryRowsCount * rowHeight;
+  const clientHeight = gridHeight - totalHeaderHeight - summaryRowsCount * summaryRowHeight;
   const isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
 
   const { columns, viewportColumns, layoutCssVars, columnMetrics, totalColumnWidth, lastFrozenColumnIndex, totalFrozenColumnWidth, groupBy } = useViewportColumns({
@@ -916,6 +919,7 @@ function DataGrid<R, SR>({
         '--filter-row-height': `${headerFiltersHeight}px`,
         '--row-width': `${totalColumnWidth}px`,
         '--row-height': `${rowHeight}px`,
+        '--summary-row-height': `${summaryRowHeight}px`,
         ...layoutCssVars
       } as unknown as React.CSSProperties}
       ref={gridRef}
diff --git a/src/style/row.ts b/src/style/row.ts
index 4ee4e18932..9919699ee6 100644
--- a/src/style/row.ts
+++ b/src/style/row.ts
@@ -34,6 +34,9 @@ export const rowSelectedClassname = `rdg-row-selected ${rowSelected}`;
 const summaryRow = css`
   position: sticky;
   z-index: 3;
+  grid-template-rows: var(--summary-row-height);
+  height: var(--summary-row-height); // needed on Firefox
+  line-height: var(--summary-row-height);
 
   > .${cell} {
     border-top: 2px solid var(--summary-border-color);