diff --git a/docs/themes/navy/layout/partial/demo.json b/docs/themes/navy/layout/partial/demo.json
new file mode 100644
index 0000000000..d237b39116
--- /dev/null
+++ b/docs/themes/navy/layout/partial/demo.json
@@ -0,0 +1,7 @@
+{
+  "people": [
+    "alice",
+    "bob",
+    "carol"
+  ]
+}
diff --git a/docs/themes/navy/layout/partial/demo.liquid b/docs/themes/navy/layout/partial/demo.liquid
index 21739b90fb..b8bf0d5ea8 100644
--- a/docs/themes/navy/layout/partial/demo.liquid
+++ b/docs/themes/navy/layout/partial/demo.liquid
@@ -1,5 +1,3 @@
-{% assign people = "alice, bob, carol" | split: ", " -%}
-
 <ul>
 {%- for person in people %}
   <li>
diff --git a/docs/themes/navy/layout/playground.swig b/docs/themes/navy/layout/playground.swig
index 304e1161fd..e09cfa1d03 100644
--- a/docs/themes/navy/layout/playground.swig
+++ b/docs/themes/navy/layout/playground.swig
@@ -2,12 +2,19 @@
   <div class="wrapper">
     <h1 class="inner">{{__('playground.title')}}</h1>
     <div class="loader" role=status aria-busy=true></div>
-    <div id="editors" class="row inner hide" aria-hide=true>
-      <div class="col">
-        <div id="editorEl">{{ raw('partial/demo.liquid') }}</div>
-        <div id="dataEl">{}</div>
+    <div id="editors" class="inner hide" aria-hide=true>
+      <div class="area-tpl editor-wrapper">
+        <h2>Template</h2>
+        <div class="editor" id="editorEl">{{ raw('partial/demo.liquid') }}</div>
+      </div>
+      <div class="area-data editor-wrapper">
+        <h2>Context</h2>
+        <div class="editor" id="dataEl">{{ raw('partial/demo.json') }}</div>
+      </div>
+      <div class="area-output editor-wrapper">
+        <h2>Output</h2>
+        <div class="editor" id="previewEl">{{__('playground.loading')}}</div>
       </div>
-      <div class="col" id="previewEl">{{__('playground.loading')}}</div>
     </div>
     <p class="inner version"></p>
   </div>
diff --git a/docs/themes/navy/source/css/_partial/playground.styl b/docs/themes/navy/source/css/_partial/playground.styl
index a1e5aa700b..b1e61ba855 100644
--- a/docs/themes/navy/source/css/_partial/playground.styl
+++ b/docs/themes/navy/source/css/_partial/playground.styl
@@ -8,28 +8,29 @@
     font-weight: 300
     margin: 40px 0 24px
 
-  .row
+  #editors
+    display: grid
+    overflow: hidden
+    margin-bottom: 16px
+    height: 75vh
+    grid-template-columns: auto auto
+    grid-template-rows: 60% 40%
+    grid-gap: 16px
+  .area-tpl
+    grid-row: 1
+    grid-column: 1
+  .area-data
+    grid-row: 2
+    grid-column: 1
+  .area-output
+    grid-column: 2
+    grid-row: 1 / -1
+  .editor-wrapper
     display: flex
-    flex-wrap: wrap;
-    justify-content: space-between
-    font-size: 1em
-    .col
-      flex: 1 1 100%
-      margin-bottom: 10px
-
-  @media mq-normal
-    .row
-      flex-wrap: nowrap;
-    .col:first-child
-      margin-right: 15px
-
-  #editorEl
-    height: 40vh
-  #dataEl
-    height: 28vh
-    margin-top: 2vh
-  #previewEl
-    height: 70vh
+    gap: 8px
+    flex-direction: column
+    .editor
+      flex-grow: 1
   .hide
     display: none
   .loader