diff --git a/packages/grid/test/column.test.js b/packages/grid/test/column.test.js
index 2bca9e81ca2..006ee8a544e 100644
--- a/packages/grid/test/column.test.js
+++ b/packages/grid/test/column.test.js
@@ -503,6 +503,46 @@ describe('column', () => {
     });
   });
 
+  describe('cell content attach and detach', () => {
+    ['header', 'body', 'footer'].forEach((sectionName) => {
+      let content;
+
+      beforeEach(() => {
+        switch (sectionName) {
+          case 'header':
+            content = getHeaderCellContent(grid, 1, 0);
+            break;
+          case 'footer':
+            content = getContainerCellContent(grid.$.footer, 0, 0);
+            break;
+          default:
+            content = getBodyCellContent(grid, 0, 0);
+        }
+      });
+
+      it(`should remove ${sectionName} cell content from the grid when column is removed`, async () => {
+        column.remove();
+        await nextFrame();
+
+        expect(content.parentElement).to.be.null;
+      });
+    });
+
+    it('should render cell content when column is added back', async () => {
+      const group = column.parentElement;
+      column.remove();
+      await nextFrame();
+
+      group.insertBefore(column, group.firstElementChild);
+      await nextFrame();
+      flushGrid(grid);
+
+      expect(getHeaderCellContent(grid, 1, 0).textContent).to.equal('header1');
+      expect(getContainerCellContent(grid.$.footer, 0, 0).textContent).to.equal('footer1');
+      expect(getBodyCellContent(grid, 0, 0).textContent).to.equal('cell');
+    });
+  });
+
   it('should not throw an exception when size is changed after removing column', () => {
     expect(grid.size).to.equal(10);
     expect(column.isConnected).to.be.true;