diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 4ec27255852..318decfc653 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2"
+  class="testClass1 testClass2 euiDataGrid"
   data-test-subj="test subject string"
 >
   <div
@@ -44,64 +44,60 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
     </div>
   </div>
   <div
-    class="dataGridBody"
+    class="euiDataGridRow"
+    data-test-subj="dataGridRow"
   >
     <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
     >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        0, A
-      </div>
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        0, B
-      </div>
+      0, A
     </div>
     <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
     >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        1, A
-      </div>
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        1, B
-      </div>
+      0, B
     </div>
+  </div>
+  <div
+    class="euiDataGridRow"
+    data-test-subj="dataGridRow"
+  >
     <div
-      class="euiDataGridRow"
-      data-test-subj="dataGridRow"
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
     >
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        2, A
-      </div>
-      <div
-        class="euiDataGridRowCell"
-        data-test-subj="dataGridRowCell"
-        style="width:100px"
-      >
-        2, B
-      </div>
+      1, A
+    </div>
+    <div
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
+    >
+      1, B
+    </div>
+  </div>
+  <div
+    class="euiDataGridRow"
+    data-test-subj="dataGridRow"
+  >
+    <div
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
+    >
+      2, A
+    </div>
+    <div
+      class="euiDataGridRowCell"
+      data-test-subj="dataGridRowCell"
+      style="width:100px"
+    >
+      2, B
     </div>
   </div>
 </div>
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
new file mode 100644
index 00000000000..794f0effbaf
--- /dev/null
+++ b/src/components/datagrid/_data_grid.scss
@@ -0,0 +1,7 @@
+.euiDataGrid {
+  @include euiScrollBar;
+  font-feature-settings: 'tnum' 1; // Tabular numbers
+  overflow-x: auto;
+  max-width: 100%;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/datagrid/_data_grid_column_resizer.scss b/src/components/datagrid/_data_grid_column_resizer.scss
index 3d4e7406f48..5e001b2afd4 100644
--- a/src/components/datagrid/_data_grid_column_resizer.scss
+++ b/src/components/datagrid/_data_grid_column_resizer.scss
@@ -1,9 +1,27 @@
+  // Resizer straddles the column border and is an invisible hitzone for dragging
 .euiDataGridColumnResizer {
   position: absolute;
   top: 0;
-  right: 0;
+  right: -$euiSizeS;
   height: 100%;
-  width: 3px;
-  background-color: $euiColorDarkestShade;
+  width: $euiSize;
   cursor: ew-resize;
+  opacity: 0;
+  z-index: 2;
+
+  // Center a vertical line within the button above
+  &:after {
+    content: '';
+    position: absolute;
+    left: $euiSizeS - 1px;
+    top: 0;
+    bottom: 0;
+    width: $euiDataGridColumnResizerWidth;
+    background-color: $euiColorPrimary;
+  }
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
 }
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 56e9f1445ac..baec186f8af 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -1,14 +1,18 @@
 .euiDataGridRow {
-  white-space: nowrap;
+  display: inline-flex;
+  min-width: 100%;
 }
 
 .euiDataGridRowCell {
-  display: inline-block;
-  padding: $euiSize;
-  border: $euiBorderThin;
-  border-left-width: 0;
+  @include euiFontSizeXS;
+  @include euiTextTruncate;
+
+  padding: $euiSizeM / 2;
+  border-right: $euiBorderThin;
+  border-bottom: $euiBorderThin;
   overflow: hidden;
   white-space: nowrap;
+  flex: 0 0 auto;
 
   &:first-of-type {
     border-left: $euiBorderThin;
diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
index e962b97f482..cab0119b318 100644
--- a/src/components/datagrid/_data_grid_header_row.scss
+++ b/src/components/datagrid/_data_grid_header_row.scss
@@ -1,9 +1,18 @@
+.euiDataGridHeader {
+  display: inline-flex;
+  min-width: 100%;
+}
+
 .euiDataGridHeaderCell {
-  display: inline-block;
-  padding: $euiSize;
+  @include euiFontSizeXS;
+
+  padding: $euiSizeM / 2;
   border: $euiBorderThin;
-  border-left-width: 0;
+  border-left: none;
   position: relative;
+  background: $euiColorLightestShade;
+  flex: 0 0 auto;
+
 
   &:first-of-type {
     border-left: $euiBorderThin;
diff --git a/src/components/datagrid/_index.scss b/src/components/datagrid/_index.scss
index 8f26162dab3..10d5a8c8837 100644
--- a/src/components/datagrid/_index.scss
+++ b/src/components/datagrid/_index.scss
@@ -1,3 +1,6 @@
+@import 'variables';
+@import 'mixins';
+@import 'data_grid';
 @import 'data_grid_header_row';
 @import 'data_grid_column_resizer';
 @import 'data_grid_data_row';
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss
new file mode 100644
index 00000000000..6dc61af5625
--- /dev/null
+++ b/src/components/datagrid/_variables.scss
@@ -0,0 +1 @@
+$euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border
\ No newline at end of file
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index ff4c86408f9..4fafca0250b 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -4,6 +4,7 @@ import { EuiDataGridDataRow } from './data_grid_data_row';
 import { CommonProps } from '../common';
 import { Column, ColumnWidths } from './data_grid_types';
 import { EuiDataGridCellProps } from './data_grid_cell';
+import classNames from 'classnames';
 
 type EuiDataGridProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
@@ -60,16 +61,22 @@ export class EuiDataGrid extends Component<EuiDataGridProps, EuiDataGridState> {
 
   render() {
     const { columnWidths, rows } = this.state;
-    const { columns, rowCount, renderCellValue, ...rest } = this.props;
+    const {
+      columns,
+      rowCount,
+      renderCellValue,
+      className,
+      ...rest
+    } = this.props;
 
     return (
-      <div {...rest}>
+      <div {...rest} className={classNames(className, 'euiDataGrid')}>
         <EuiDataGridHeaderRow
           columns={columns}
           columnWidths={columnWidths}
           setColumnWidth={this.setColumnWidth}
         />
-        <div className="dataGridBody">{rows}</div>
+        {rows}
       </div>
     );
   }