diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts b/packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts
index 8ff76e23f5..167f257522 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts
@@ -22,5 +22,5 @@ export declare class DashboardLayoutMixinClass {
   /**
    * Whether the dashboard layout is dense.
    */
-  dense: boolean;
+  denseLayout: boolean;
 }
diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
index 77939a0977..7e5aa7a2c0 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
+++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -30,7 +30,7 @@ export const DashboardLayoutMixin = (superClass) =>
           display: none !important;
         }
 
-        :host([dense]) #grid {
+        :host([dense-layout]) #grid {
           grid-auto-flow: dense;
         }
 
@@ -101,7 +101,7 @@ export const DashboardLayoutMixin = (superClass) =>
          * Whether the dashboard layout is dense.
          * @type {boolean}
          */
-        dense: {
+        denseLayout: {
           type: Boolean,
           value: false,
           reflectToAttribute: true,
diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
index f4b812d43f..2e9fb6181a 100644
--- a/packages/dashboard/test/dashboard-layout.test.ts
+++ b/packages/dashboard/test/dashboard-layout.test.ts
@@ -554,12 +554,12 @@ describe('dashboard layout', () => {
     });
   });
 
-  describe('dense', () => {
+  describe('dense layout', () => {
     beforeEach(async () => {
       dashboard.appendChild(fixtureSync('<div id="2">Item 2</div>'));
       childElements = [...dashboard.querySelectorAll('div')];
       setColspan(childElements[1], 2);
-      dashboard.dense = true;
+      dashboard.denseLayout = true;
       await nextFrame();
     });
 
@@ -572,7 +572,7 @@ describe('dashboard layout', () => {
     });
 
     it('should retain the order of items', async () => {
-      dashboard.dense = false;
+      dashboard.denseLayout = false;
       await nextFrame();
       /* prettier-ignore */
       expectLayout(dashboard, [
diff --git a/packages/dashboard/test/typings/dashboard.types.ts b/packages/dashboard/test/typings/dashboard.types.ts
index 239f022abf..97d88bddcd 100644
--- a/packages/dashboard/test/typings/dashboard.types.ts
+++ b/packages/dashboard/test/typings/dashboard.types.ts
@@ -35,7 +35,7 @@ assertType<ElementMixinClass>(genericDashboard);
 assertType<DashboardLayoutMixinClass>(genericDashboard);
 assertType<Array<DashboardItem | DashboardSectionItem<DashboardItem>> | null | undefined>(genericDashboard.items);
 assertType<boolean>(genericDashboard.editable);
-assertType<boolean>(genericDashboard.dense);
+assertType<boolean>(genericDashboard.denseLayout);
 
 assertType<{
   selectWidget: string;
@@ -113,7 +113,7 @@ narrowedDashboard.addEventListener('dashboard-item-resize-mode-changed', (event)
 /* DashboardLayout */
 const layout = document.createElement('vaadin-dashboard-layout');
 assertType<DashboardLayout>(layout);
-assertType<boolean>(layout.dense);
+assertType<boolean>(layout.denseLayout);
 
 assertType<ElementMixinClass>(layout);
 assertType<DashboardLayoutMixinClass>(layout);