diff --git a/docs/data/data-grid/components/CustomColumnsPanel.js b/docs/data/data-grid/components/CustomColumnsPanel.js
index bac2bd9121b1c..82f4089edd8ce 100644
--- a/docs/data/data-grid/components/CustomColumnsPanel.js
+++ b/docs/data/data-grid/components/CustomColumnsPanel.js
@@ -71,7 +71,7 @@ function ColumnGroup({ group, columnLookup, apiRef, columnVisibilityModel }) {
         label={group.headerName ?? group.groupId}
         onChange={(_, newValue) => toggleColumnGroup(newValue)}
       />
-      <Box sx={{ pl: 1 }}>
+      <Box sx={{ pl: 3.5 }}>
         {group.children.map((child) => {
           return isLeaf(child) ? (
             <Stack direction="row" key={child.field}>
diff --git a/docs/data/data-grid/components/CustomColumnsPanel.tsx b/docs/data/data-grid/components/CustomColumnsPanel.tsx
index 11b26812d241b..1516ba3e1cf7b 100644
--- a/docs/data/data-grid/components/CustomColumnsPanel.tsx
+++ b/docs/data/data-grid/components/CustomColumnsPanel.tsx
@@ -91,7 +91,7 @@ function ColumnGroup({
         label={group.headerName ?? group.groupId}
         onChange={(_, newValue) => toggleColumnGroup(newValue)}
       />
-      <Box sx={{ pl: 1 }}>
+      <Box sx={{ pl: 3.5 }}>
         {group.children.map((child) => {
           return isLeaf(child) ? (
             <Stack direction="row" key={child.field}>