Add grid interactions

docs/_javascript/playground.js

@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const $grid = document.getElementById("grid");
+  const $columns = document.querySelectorAll(".jsColumns");
+
+  $columns.forEach(($) =>
+    $.addEventListener(
+      "input",
+      (event) => {
+        const count = event.target.valueAsNumber;
+        const suffix = event.target.dataset.suffix;
+        console.log("Column count", count);
+        $grid.className = `grid has-${count}-cols${suffix}`;
+        const $columnsCount = getAll("strong", $.parentNode);
+        $columnsCount.innerHTML = count;
+      },
+      false
+    )
+  );
+
+  function getAll(selector, parent = document) {
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
+  }
+});