diff --git a/src/browser/base/content/ZenViewSplitter.mjs b/src/browser/base/content/ZenViewSplitter.mjs
index 09b1ea765..ca8e7f743 100644
--- a/src/browser/base/content/ZenViewSplitter.mjs
+++ b/src/browser/base/content/ZenViewSplitter.mjs
@@ -7,7 +7,8 @@ var gZenViewSplitter = {
    *      tab1,
    *      tab2,
    *      tab3,
-   *     ]
+   *     ],
+   *    gridType: "vsplit" | "hsplit" | "grid",
    *   }
    * ]
    */
@@ -107,8 +108,10 @@ var gZenViewSplitter = {
         container.classList.remove("deck-selected");
         console.assert(container, "No container found for tab");
         container.removeEventListener("click", handleClick(tab));
+        container.style.gridArea = "";
       }
       this.tabBrowserPanel.removeAttribute("zen-split-view");
+      //this.tabBrowserPanel.style.gridTemplateAreas = "";
       Services.prefs.setBoolPref("zen.splitView.working", false);
       modifyDecks(this._data[this.currentView].tabs, false);
       this.currentView = -1;
@@ -119,16 +122,41 @@ var gZenViewSplitter = {
     this.tabBrowserPanel.setAttribute("zen-split-view", "true");
     Services.prefs.setBoolPref("zen.splitView.working", true);
     this.currentView = this._data.indexOf(splitData);
+    let gridType = splitData.gridType || "grid"; // TODO: let user decide the grid type
+    let i = 0;
+    // 2 rows, infinite columns
+    let currentRowGridArea = ["", ""/* first row, second row */];
+    let numberOfRows = 0;
     for (const _tab of splitData.tabs) {
       _tab._zenSplitted = true;
       let container = _tab.linkedBrowser.closest(".browserSidebarContainer");
+      console.assert(container, "No container found for tab");
       container.removeAttribute("zen-split-active");
       if (_tab == tab) {
         container.setAttribute("zen-split-active", "true");
       }
       container.setAttribute("zen-split-anim", "true");
       container.addEventListener("click", handleClick(_tab));
-      console.assert(container, "No container found for tab");
+      // Set the grid type for the container. If the grid type is not "grid", then set the grid type contain 
+      // each column or row. If it's "grid", then try to create
+      if (gridType == "grid") {
+        // Each 2 tabs, create a new row
+        if (i % 2 == 0) {
+          currentRowGridArea[0] += ` tab${i + 1}`;
+        } else {
+          currentRowGridArea[1] += ` tab${i + 1}`;
+          numberOfRows++;
+        }
+        container.style.gridArea = `tab${i + 1}`;
+      }
+      i++;
+    }
+    if (gridType == "grid") {
+      if (numberOfRows < splitData.tabs.length / 2) {
+        // Make the last tab occupy the last row
+        currentRowGridArea[1] += ` tab${i}`;
+      }
+      this.tabBrowserPanel.style.gridTemplateAreas = `'${currentRowGridArea[0]}' '${currentRowGridArea[1]}'`;
     }
     modifyDecks(splitData.tabs, true);
   },
diff --git a/src/browser/themes/shared/zen-decks.css b/src/browser/themes/shared/zen-decks.css
index 5bf4d68cc..7d0a967b4 100644
--- a/src/browser/themes/shared/zen-decks.css
+++ b/src/browser/themes/shared/zen-decks.css
@@ -24,6 +24,11 @@
   border-color: var(--zen-primary-color) !important;
 }
 
+#tabbrowser-tabpanels:has(> [zen-split="true"]) {
+  display: grid;
+  grid-gap: 0 10px !important;
+}
+
 @keyframes zen-deck-fadeIn {
   0% {
     transform: scale(0.9);