diff --git a/src-docs/src/views/datagrid/toolbar/datagrid_custom_toolbar.tsx b/src-docs/src/views/datagrid/toolbar/datagrid_custom_toolbar.tsx
index 71a4f29e864..29b3d27ce48 100644
--- a/src-docs/src/views/datagrid/toolbar/datagrid_custom_toolbar.tsx
+++ b/src-docs/src/views/datagrid/toolbar/datagrid_custom_toolbar.tsx
@@ -10,6 +10,8 @@ import {
   EuiDataGridToolbarProps,
   EuiFormRow,
   EuiRange,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -117,18 +119,28 @@ export default () => {
     fullScreenControl,
     keyboardShortcutsControl,
   }) => {
-    return {
-      left: hasRoomForGridControls ? 'Custom left side' : null,
-      right: (
-        <>
-          {columnControl}
-          {columnSortingControl}
-          {keyboardShortcutsControl}
-          {displayControl}
-          {fullScreenControl}
-        </>
-      ),
-    };
+    return (
+      <EuiFlexGroup
+        responsive={false}
+        gutterSize="s"
+        justifyContent="spaceBetween"
+        alignItems="center"
+      >
+        <EuiFlexItem grow={false}>
+          {hasRoomForGridControls && `Custom left side`}
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>{columnControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{columnSortingControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{keyboardShortcutsControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{displayControl}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{fullScreenControl}</EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
   };
 
   return (
diff --git a/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js b/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js
index 6b8f172a8b1..50589378441 100644
--- a/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js
+++ b/src-docs/src/views/datagrid/toolbar/datagrid_toolbar_example.js
@@ -201,14 +201,12 @@ export const DataGridToolbarExample = {
       text: (
         <>
           <p>
-            For advanced use cases, the <EuiCode>renderCustomToolbar</EuiCode>{' '}
+            For advanced use cases, the <EuiCode>renderCustomToolbar</EuiCode>
             prop for <EuiCode>EuiDataGrid</EuiCode> may be used to take complete
-            control over the placement of the toolbar controls (by returning{' '}
-            <EuiCode>left</EuiCode> and <EuiCode>right</EuiCode>) or the whole
-            toolbar element (by returning a react element). This may be useful
-            where custom layout (e.g., all buttons on the right side) are
-            required. The default individual controls will be available as
-            function parameters.
+            control over the whole toolbar element (by returning a react
+            element). This may be useful where a custom layout (e.g., all
+            buttons on the right side) is required. The default individual
+            controls will be available as function parameters.
           </p>
         </>
       ),
diff --git a/src/components/datagrid/controls/data_grid_toolbar.test.tsx b/src/components/datagrid/controls/data_grid_toolbar.test.tsx
index 606f64962c0..2d7bfa9299f 100644
--- a/src/components/datagrid/controls/data_grid_toolbar.test.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar.test.tsx
@@ -32,31 +32,34 @@ describe('EuiDataGridToolbar', () => {
     const component = shallow(<EuiDataGridToolbar {...requiredProps} />);
 
     expect(component).toMatchInlineSnapshot(`
-      <EuiDataGridToolbarContainer
-        left={
-          <React.Fragment>
-            <div>
-              mock column selector
-            </div>
-            <div>
-              mock column sorting
-            </div>
-          </React.Fragment>
-        }
-        right={
-          <React.Fragment>
-            <div>
-              mock keyboard shortcuts
-            </div>
-            <div>
-              mock style selector
-            </div>
-            <div>
-              mock fullscreen selector
-            </div>
-          </React.Fragment>
-        }
-      />
+      <div
+        className="euiDataGrid__controls"
+        data-test-subj="dataGridControls"
+      >
+        <div
+          className="euiDataGrid__leftControls"
+        >
+          <div>
+            mock column selector
+          </div>
+          <div>
+            mock column sorting
+          </div>
+        </div>
+        <div
+          className="euiDataGrid__rightControls"
+        >
+          <div>
+            mock keyboard shortcuts
+          </div>
+          <div>
+            mock style selector
+          </div>
+          <div>
+            mock fullscreen selector
+          </div>
+        </div>
+      </div>
     `);
   });
 
@@ -66,22 +69,27 @@ describe('EuiDataGridToolbar', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-      <EuiDataGridToolbarContainer
-        left={<React.Fragment />}
-        right={
-          <React.Fragment>
-            <EuiScreenReaderOnly
-              showOnFocus={true}
-            >
-              <span>
-                <div>
-                  mock keyboard shortcuts
-                </div>
-              </span>
-            </EuiScreenReaderOnly>
-          </React.Fragment>
-        }
-      />
+      <div
+        className="euiDataGrid__controls"
+        data-test-subj="dataGridControls"
+      >
+        <div
+          className="euiDataGrid__leftControls"
+        />
+        <div
+          className="euiDataGrid__rightControls"
+        >
+          <EuiScreenReaderOnly
+            showOnFocus={true}
+          >
+            <span>
+              <div>
+                mock keyboard shortcuts
+              </div>
+            </span>
+          </EuiScreenReaderOnly>
+        </div>
+      </div>
     `);
   });
 
@@ -103,25 +111,28 @@ describe('EuiDataGridToolbar', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-      <EuiDataGridToolbarContainer
-        left={
-          <React.Fragment>
-            <div>
-              hello
-            </div>
-          </React.Fragment>
-        }
-        right={
-          <React.Fragment>
-            <div>
-              world
-            </div>
-            <div>
-              mock keyboard shortcuts
-            </div>
-          </React.Fragment>
-        }
-      />
+      <div
+        className="euiDataGrid__controls"
+        data-test-subj="dataGridControls"
+      >
+        <div
+          className="euiDataGrid__leftControls"
+        >
+          <div>
+            hello
+          </div>
+        </div>
+        <div
+          className="euiDataGrid__rightControls"
+        >
+          <div>
+            world
+          </div>
+          <div>
+            mock keyboard shortcuts
+          </div>
+        </div>
+      </div>
     `);
   });
 });
diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx
index 31c70206f80..f00722d1014 100644
--- a/src/components/datagrid/controls/data_grid_toolbar.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar.tsx
@@ -73,7 +73,7 @@ export const EuiDataGridToolbar = ({
     : null;
 
   if (renderCustomToolbar) {
-    const customToolbar = renderCustomToolbar({
+    return renderCustomToolbar({
       hasRoomForGridControls,
       columnControl,
       columnSortingControl,
@@ -81,60 +81,24 @@ export const EuiDataGridToolbar = ({
       displayControl,
       fullScreenControl,
     });
-
-    if (isValidElement(customToolbar)) {
-      return customToolbar;
-    }
-
-    return (
-      <EuiDataGridToolbarContainer
-        left={customToolbar.left}
-        right={customToolbar.right}
-      />
-    );
   }
 
-  return (
-    <EuiDataGridToolbarContainer
-      left={
-        hasRoomForGridControls ? (
-          <>
-            {renderAdditionalControls(toolbarVisibility, 'left.prepend')}
-            {columnControl}
-            {columnSortingControl}
-            {renderAdditionalControls(toolbarVisibility, 'left.append')}
-          </>
-        ) : null
-      }
-      right={
-        <>
-          {renderAdditionalControls(toolbarVisibility, 'right')}
-          {keyboardShortcutsControl}
-          {displayControl}
-          {fullScreenControl}
-        </>
-      }
-    />
-  );
-};
-
-/**
- * Toolbar container component
- * @param left
- * @param right
- * @constructor
- */
-const EuiDataGridToolbarContainer = ({
-  left,
-  right,
-}: {
-  left?: ReactNode;
-  right?: ReactNode;
-}) => {
   return (
     <div className="euiDataGrid__controls" data-test-subj="dataGridControls">
-      {left && <div className="euiDataGrid__leftControls">{left}</div>}
-      {right && <div className="euiDataGrid__rightControls">{right}</div>}
+      {hasRoomForGridControls && (
+        <div className="euiDataGrid__leftControls">
+          {renderAdditionalControls(toolbarVisibility, 'left.prepend')}
+          {columnControl}
+          {columnSortingControl}
+          {renderAdditionalControls(toolbarVisibility, 'left.append')}
+        </div>
+      )}
+      <div className="euiDataGrid__rightControls">
+        {renderAdditionalControls(toolbarVisibility, 'right')}
+        {keyboardShortcutsControl}
+        {displayControl}
+        {fullScreenControl}
+      </div>
     </div>
   );
 };
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 71bb7b9a257..340eb8f2780 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -47,13 +47,7 @@ export interface EuiDataGridToolbarProps {
   displaySelector: ReactNode;
   columnSelector: ReactNode;
   columnSorting: ReactNode;
-  renderCustomToolbar?: (props: EuiDataGridCustomToolbarProps) =>
-    | {
-        // to replace only controls inside the toolbar, use `left` and `right`
-        left?: ReactNode;
-        right?: ReactNode;
-      }
-    | ReactElement; // to replace the whole toolbar
+  renderCustomToolbar?: (props: EuiDataGridCustomToolbarProps) => ReactElement;
 }
 
 /**
diff --git a/upcoming_changelogs/7190.md b/upcoming_changelogs/7190.md
index eaccad03f5c..d2e715b0ed7 100644
--- a/upcoming_changelogs/7190.md
+++ b/upcoming_changelogs/7190.md
@@ -1,4 +1,4 @@
-- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar or a custom placement of the default toolbar controls.
+- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar.
 - Added a new `allowResetButton` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows to hide "Reset to default" button from the display settings popover.
 - Added a new `additionalDisplaySettings` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows to render extra settings inside the display settings popover.
 - Replaced the display setting popover icon in `EuiDataGrid` toolbar from `tableDensityCompact`/`tableDensityExpanded`/`tableDensityNormal` with `controlsHorizontal`.