diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 9aedfc8618..25cdef535c 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -1004,7 +1004,6 @@ function DataGrid<R, SR, K extends Key>(
           onCellContextMenu: onCellContextMenuLatest,
           rowClass,
           gridRowStart,
-          height: getRowHeight(rowIdx),
           copiedCellIdx:
             copiedCell !== null && copiedCell.row === row
               ? columns.findIndex((c) => c.key === copiedCell.columnKey)
@@ -1077,8 +1076,6 @@ function DataGrid<R, SR, K extends Key>(
               : undefined,
           gridTemplateColumns,
           gridTemplateRows: templateRows,
-          '--rdg-header-row-height': `${headerRowHeight}px`,
-          '--rdg-summary-row-height': `${summaryRowHeight}px`,
           '--rdg-scroll-height': `${scrollHeight}px`,
           '--rdg-sign': isRtl ? -1 : 1,
           ...layoutCssVars
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 1b5e79e641..715549f04b 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -40,7 +40,6 @@ function GroupedRow<R, SR>({
   isRowSelected,
   selectCell,
   gridRowStart,
-  height,
   groupBy,
   toggleGroup,
   ...props
@@ -68,7 +67,7 @@ function GroupedRow<R, SR>({
           className
         )}
         onClick={handleSelectGroup}
-        style={getRowStyle(gridRowStart, height)}
+        style={getRowStyle(gridRowStart)}
         {...props}
       >
         {viewportColumns.map((column) => (
diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
index 09fced82e4..df499aaa1a 100644
--- a/src/HeaderRow.tsx
+++ b/src/HeaderRow.tsx
@@ -28,7 +28,6 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
 const headerRow = css`
   @layer rdg.HeaderRow {
     display: contents;
-    line-height: var(--rdg-header-row-height);
     background-color: var(--rdg-header-background-color);
     font-weight: bold;
 
diff --git a/src/Row.tsx b/src/Row.tsx
index aab22bda6b..5775162568 100644
--- a/src/Row.tsx
+++ b/src/Row.tsx
@@ -12,7 +12,6 @@ function Row<R, SR>(
     className,
     rowIdx,
     gridRowStart,
-    height,
     selectedCellIdx,
     isRowSelected,
     copiedCellIdx,
@@ -94,7 +93,7 @@ function Row<R, SR>(
         ref={ref}
         className={className}
         onMouseEnter={handleDragEnter}
-        style={getRowStyle(gridRowStart, height)}
+        style={getRowStyle(gridRowStart)}
         {...props}
       >
         {cells}
diff --git a/src/SummaryRow.tsx b/src/SummaryRow.tsx
index fec815bde6..649596165c 100644
--- a/src/SummaryRow.tsx
+++ b/src/SummaryRow.tsx
@@ -30,8 +30,6 @@ interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
 
 const summaryRow = css`
   @layer rdg.SummaryRow {
-    line-height: var(--rdg-summary-row-height);
-
     > .${cell} {
       position: sticky;
     }
diff --git a/src/style/cell.ts b/src/style/cell.ts
index 8132fe4029..02afec16a0 100644
--- a/src/style/cell.ts
+++ b/src/style/cell.ts
@@ -14,6 +14,7 @@ export const cell = css`
     border-inline-end: 1px solid var(--rdg-border-color);
     border-block-end: 1px solid var(--rdg-border-color);
     grid-row-start: var(--rdg-grid-row-start);
+    align-content: center;
     background-color: inherit;
 
     white-space: nowrap;
diff --git a/src/style/row.ts b/src/style/row.ts
index df97172a9e..afac55a7da 100644
--- a/src/style/row.ts
+++ b/src/style/row.ts
@@ -3,7 +3,6 @@ import { css } from '@linaria/core';
 export const row = css`
   @layer rdg.Row {
     display: contents;
-    line-height: var(--rdg-row-height);
     background-color: var(--rdg-background-color);
 
     &:hover {
diff --git a/src/types.ts b/src/types.ts
index 703ec14d0d..4e842140bd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -210,7 +210,6 @@ export interface BaseRenderRowProps<TRow, TSummaryRow = unknown>
   selectedCellIdx: number | undefined;
   isRowSelected: boolean;
   gridRowStart: number;
-  height: number;
   selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
 }
 
diff --git a/src/utils/styleUtils.ts b/src/utils/styleUtils.ts
index f9762861f1..53a3becc57 100644
--- a/src/utils/styleUtils.ts
+++ b/src/utils/styleUtils.ts
@@ -4,14 +4,7 @@ import clsx from 'clsx';
 import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';
 import { cellClassname, cellFrozenClassname } from '../style/cell';
 
-export function getRowStyle(rowIdx: number, height?: number): CSSProperties {
-  if (height !== undefined) {
-    return {
-      '--rdg-grid-row-start': rowIdx,
-      '--rdg-row-height': `${height}px`
-    } as unknown as CSSProperties;
-  }
-
+export function getRowStyle(rowIdx: number): CSSProperties {
   return { '--rdg-grid-row-start': rowIdx } as unknown as CSSProperties;
 }
 
diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts
index 2a46eb0085..a364b4e7a0 100644
--- a/test/rowHeight.test.ts
+++ b/test/rowHeight.test.ts
@@ -24,14 +24,11 @@ function setupGrid(rowHeight: DataGridProps<Row>['rowHeight']) {
 test('rowHeight is number', async () => {
   setupGrid(40);
 
-  const rows = getRows();
-  expect(rows[0]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows[1]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows[2]).toHaveStyle({ '--rdg-row-height': '40px' });
+  const grid = screen.getByRole('grid');
+  expect(grid).toHaveStyle({ 'grid-template-rows': 'repeat(1, 40px) repeat(50, 40px)' });
   expect(getRows()).toHaveLength(31);
 
   await userEvent.tab();
-  const grid = screen.getByRole('grid');
   expect(grid.scrollTop).toBe(0);
 
   // Go to the last cell
@@ -43,15 +40,14 @@ test('rowHeight is number', async () => {
 test('rowHeight is function', async () => {
   setupGrid((row) => [40, 60, 80][row % 3]);
 
-  const rows = getRows();
-  expect(rows[0]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows[1]).toHaveStyle({ '--rdg-row-height': '60px' });
-  expect(rows[2]).toHaveStyle({ '--rdg-row-height': '80px' });
-  expect(rows[3]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows).toHaveLength(22);
+  const grid = screen.getByRole('grid');
+  expect(grid).toHaveStyle({
+    'grid-template-rows':
+      'repeat(1, 35px) 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px'
+  });
+  expect(getRows()).toHaveLength(22);
 
   await userEvent.tab();
-  const grid = screen.getByRole('grid');
   expect(grid.scrollTop).toBe(0);
 
   const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView');
diff --git a/website/demos/Animation.tsx b/website/demos/Animation.tsx
index 6de229a746..43388ea94f 100644
--- a/website/demos/Animation.tsx
+++ b/website/demos/Animation.tsx
@@ -14,11 +14,6 @@ const rangeClassname = css`
 
 const transitionClassname = css`
   transition: grid-template-rows 0.5s ease;
-
-  > .rdg-header-row,
-  > .rdg-row {
-    transition: line-height 0.5s ease;
-  }
 `;
 
 interface Row {
diff --git a/website/demos/TreeView.tsx b/website/demos/TreeView.tsx
index 2c11971672..57b094dd44 100644
--- a/website/demos/TreeView.tsx
+++ b/website/demos/TreeView.tsx
@@ -139,7 +139,14 @@ export default function TreeView({ direction }: Props) {
           const hasChildren = row.children !== undefined;
           const style = hasChildren ? undefined : { marginInlineStart: 30 };
           return (
-            <>
+            <div
+              className={css`
+                display: flex;
+                gap: 10px;
+                block-size: 100%;
+                align-items: center;
+              `}
+            >
               {hasChildren && (
                 <CellExpanderFormatter
                   tabIndex={tabIndex}
@@ -147,17 +154,15 @@ export default function TreeView({ direction }: Props) {
                   onCellExpand={() => dispatch({ id: row.id, type: 'toggleSubRow' })}
                 />
               )}
-              <div className="rdg-cell-value">
-                {!hasChildren && (
-                  <ChildRowDeleteButton
-                    tabIndex={tabIndex}
-                    isDeleteSubRowEnabled={allowDelete}
-                    onDeleteSubRow={() => dispatch({ id: row.id, type: 'deleteSubRow' })}
-                  />
-                )}
-                <div style={style}>{row.format}</div>
-              </div>
-            </>
+              {!hasChildren && (
+                <ChildRowDeleteButton
+                  tabIndex={tabIndex}
+                  isDeleteSubRowEnabled={allowDelete}
+                  onDeleteSubRow={() => dispatch({ id: row.id, type: 'deleteSubRow' })}
+                />
+              )}
+              <div style={style}>{row.format}</div>
+            </div>
           );
         }
       },
diff --git a/website/demos/components/CellExpanderFormatter.tsx b/website/demos/components/CellExpanderFormatter.tsx
index 6e23768744..9ca93aec00 100644
--- a/website/demos/components/CellExpanderFormatter.tsx
+++ b/website/demos/components/CellExpanderFormatter.tsx
@@ -1,17 +1,10 @@
 import { css } from '@linaria/core';
 
 const cellExpandClassname = css`
-  /* needed on chrome */
-  float: right;
-  float: inline-end;
-  display: table;
   block-size: 100%;
-
-  > span {
-    display: table-cell;
-    vertical-align: middle;
-    cursor: pointer;
-  }
+  align-content: center;
+  text-align: center;
+  cursor: pointer;
 `;
 
 interface CellExpanderFormatterProps {
@@ -33,10 +26,8 @@ export function CellExpanderFormatter({
   }
 
   return (
-    <div className={cellExpandClassname}>
-      <span onClick={onCellExpand} onKeyDown={handleKeyDown}>
-        <span tabIndex={tabIndex}>{expanded ? '\u25BC' : '\u25B6'}</span>
-      </span>
+    <div className={cellExpandClassname} onClick={onCellExpand} onKeyDown={handleKeyDown}>
+      <span tabIndex={tabIndex}>{expanded ? '\u25BC' : '\u25B6'}</span>
     </div>
   );
 }
diff --git a/website/demos/components/ChildRowDeleteButton.tsx b/website/demos/components/ChildRowDeleteButton.tsx
index 34efa51a2e..87a30561a7 100644
--- a/website/demos/components/ChildRowDeleteButton.tsx
+++ b/website/demos/components/ChildRowDeleteButton.tsx
@@ -1,6 +1,7 @@
 import { css } from '@linaria/core';
 
 const childRowActionCrossClassname = css`
+  block-size: 100%;
   &::before,
   &::after {
     content: '';
@@ -16,7 +17,7 @@ const childRowActionCrossClassname = css`
 
   &::after {
     inset-block-start: 50%;
-    inset-inline-start: 20px;
+    inset-inline-start: 21px;
     block-size: 1px;
     inline-size: 15px;
   }