CSS Grid System

(() => {
  let gridSystem = document.querySelector("#grid-system");
  if (gridSystem) {
    gridSystem.remove();
    document.querySelector('#grid-controller').remove();
    return;
  }
  const grid = document.createElement("article");
  grid.id = "grid-system";
  let style = document.createElement("style");
  style.innerHTML = `
        #grid-system {
          --margin: 0px;
          --max-width: unset;
          --gutter: 8px;
    
          display: flex;
          width: calc(100% - var(--margin)*2);
          max-width: var(--max-width);
          height: 100vh;
          z-index: 99999999;
          position: fixed;
          left: 50%;
          transform: translateX(-50%);
          gap: var(--gutter);
        }
        #grid-system::before, #grid-system::after {
          content: "";
          position: absolute;
          display: block;
          height: 100%;
          width: var(--margin);
          background-color: rgba(80, 200, 120, 0.1);
        }
        #grid-system::before {
          left: calc(var(--margin) * -1);
        }
        #grid-system::after {
          right: calc(var(--margin) * -1);
        }
        .column {
          flex: 1;
          background-color: rgb(255, 0, 0, 0.1);
        }
    
        #grid-controller {
          font-family: sans-serif;
          padding: 16px;
          background: #fff;
          border: thin solid #e3e3e3;
          position: fixed;
          right: 16px;
          bottom: 16px;
          border-radius: 8px;
    
          z-index: 999999999;
          user-select: none;
          width: max-content;
        }
    
        #grid-controller > header {
          margin-bottom: 24px;
          font-size: 24px;
          font-weight: 600;
          display: flex;
        }
    
        #grid-controller > main {
          display: flex;
          gap: 8px;
        }
    
        #grid-controller>main>label>input{
          margin: 0 4px 0 0;
        }
    
        #grid-controller .close-grid-controller {
          margin-left: auto;
          margin-top: 1px;
          cursor: pointer;
          color: red;
        }
      `;
  document.body.appendChild(grid);
  document.head.appendChild(style);

  const gridControl = document.createElement("article");
  gridControl.id = "grid-controller";
  gridControl.innerHTML = `
      <header><span>Grid System</span><span class="close-grid-controller">×</span></header><main><label><input type="radio" name="grid" checked="" id="grid-carbon">Carbon</label><label><input type="radio" name="grid" id="grid-adobe">Adobe</label><label><input type="radio" name="grid" id="grid-material">Material</label></main>
      `;
  document.body.appendChild(gridControl);

  function addColumn(columns) {
    if (grid.childElementCount < columns) {
      for (let i = 0; i < columns; i++) {
        const column = document.createElement("div");
        column.classList.add("column");
        grid.appendChild(column);
      }
    } else if (grid.childElementCount > columns) {
      for (let i = grid.childElementCount; i > columns; i--) {
        grid.removeChild(grid.lastElementChild);
      }
    } else return;
  }

  function setProperty(props) {
    const gridSelector = document.querySelector("#grid-system");
    const gridStyle = gridSelector.style;

    const { maxWidth, gutter, margin, columns } = props;
    maxWidth && gridStyle.setProperty("--max-width", maxWidth);
    gutter && gridStyle.setProperty("--gutter", gutter);
    margin && gridStyle.setProperty("--margin", margin);
    if (columns) addColumn(columns);
  }

  // https://carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints
  const carbon = () => {
    const xs = 320;
    const s = 672;
    const m = 1056;
    const l = 1312;
    const xl = 1584;
    if (window.innerWidth < xs) {
      setProperty({
        columns: 4,
        gutter: "16px",
        margin: "0px",
      });
    } else if (window.innerWidth < s) {
      setProperty({
        columns: 8,
        gutter: "16px",
        margin: "16px",
      });
    } else if (window.innerWidth < m) {
      setProperty({
        columns: 16,
        gutter: "16px",
        margin: "16px",
      });
    } else if (window.innerWidth < l) {
      setProperty({
        columns: 16,
        gutter: "16px",
        margin: "16px",
      });
    } else if (window.innerWidth > xl) {
      setProperty({
        columns: 16,
        gutter: "16px",
        margin: "24px",
        maxWidth: "1584px",
      });
    }
  };

  // https://spectrum.adobe.com/page/responsive-grid/#Breakpoints-and-dimensions
  const adobe = () => {
    const xs = 304;
    const s = 768;
    const m = 1280;
    const l = 1768;
    const xl = 2160;

    if (window.innerWidth < xs) {
      setProperty({
        columns: 12,
        gutter: "16px",
        margin: "0px",
        maxWidth: "304px",
      });
    } else if (window.innerWidth < s) {
      setProperty({
        columns: 12,
        gutter: "16px",
        margin: "0px",
        maxWidth: "unset",
      });
    } else if (window.innerWidth < m) {
      setProperty({
        columns: 12,
        gutter: "24px",
        margin: "0px",
        maxWidth: "unset",
      });
    } else if (window.innerWidth < l) {
      setProperty({
        columns: 12,
        gutter: "32px",
        margin: "0px",
        maxWidth: "1280px",
      });
    } else if (window.innerWidth < xl) {
      setProperty({
        columns: 16,
        gutter: "40px",
        margin: "0px",
        maxWidth: "1280px",
      });
    } else if (window.innerWidth > xl) {
      setProperty({
        columns: 16,
        gutter: "48px",
        margin: "0px",
        maxWidth: "1280px",
      });
    }
  };

  // https://material.io/design/layout/responsive-layout-grid.html#breakpoints
  // https://material.io/archive/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
  const material = () => {
    const xs = 480;
    const s = 720;

    if (window.innerWidth < xs) {
      setProperty({
        columns: 4,
        gutter: "16px",
        margin: "0px",
      });
    } else if (window.innerWidth < s) {
      setProperty({
        columns: 8,
        gutter: "24px",
        margin: "0px",
      });
    } else if (window.innerWidth > s) {
      setProperty({
        columns: 12,
        gutter: "24px",
        margin: "0px",
      });
    }
  };

  const init = () => {
    if (document.querySelector("#grid-carbon").checked) {
      window.removeEventListener("resize", adobe);
      window.removeEventListener("resize", material);

      window.addEventListener("resize", carbon);
      carbon();
    } else if (document.querySelector("#grid-adobe").checked) {
      window.removeEventListener("resize", carbon);
      window.removeEventListener("resize", material);

      window.addEventListener("resize", adobe);
      adobe();
    } else if (document.querySelector("#grid-material").checked) {
      window.removeEventListener("resize", carbon);
      window.removeEventListener("resize", adobe);

      window.addEventListener("resize", material);
      material();
    }
  };
  init();
  window.addEventListener("click", init);

  document
    .querySelector(".close-grid-controller")
    .addEventListener("click", () => {
      gridControl.remove();
      grid.remove();
    });
})();

Minify

javascript:(()=>{let n=document.querySelector("#grid-system");if(n)return n.remove(),void document.querySelector("#grid-controller").remove();const e=document.createElement("article");e.id="grid-system";let r=document.createElement("style");r.innerHTML='#grid-system {--margin: 0px;--max-width: unset;--gutter: 8px;display: flex;\n          width: calc(100% - var(--margin)*2);\n          max-width: var(--max-width);\n          height: 100vh;\n          z-index: 99999999;\n          position: fixed;\n          left: 50%;\n          transform: translateX(-50%);\n          gap: var(--gutter);\n        }\n        #grid-system::before, #grid-system::after {\n          content: "";\n          position: absolute;\n          display: block;\n          height: 100%;\n          width: var(--margin);\n          background-color: rgba(80, 200, 120, 0.1);\n        }\n        #grid-system::before {\n          left: calc(var(--margin) * -1);\n        }\n        #grid-system::after {\n          right: calc(var(--margin) * -1);\n        }\n        .column {\n          flex: 1;\n          background-color: rgb(255, 0, 0, 0.1);\n        }\n    \n        #grid-controller {\n          font-family: sans-serif;\n          padding: 16px;\n          background: #fff;\n          border: thin solid #e3e3e3;\n          position: fixed;\n          right: 16px;\n          bottom: 16px;\n          border-radius: 8px;\n    \n          z-index: 999999999;\n          user-select: none;\n          width: max-content;\n        }\n    \n        #grid-controller > header {\n          margin-bottom: 24px;\n          font-size: 24px;\n          font-weight: 600;\n          display: flex;\n        }\n    \n        #grid-controller > main {\n          display: flex;\n          gap: 8px;\n        }\n    \n        #grid-controller>main>label>input{\n          margin: 0 4px 0 0;\n        }\n    \n        #grid-controller .close-grid-controller {\n          margin-left: auto;\n          margin-top: 1px;\n          cursor: pointer;\n          color: red;\n        }\n      ',document.body.appendChild(e),document.head.appendChild(r);const t=document.createElement("article");function i(n){const r=document.querySelector("#grid-system").style,{maxWidth:t,gutter:i,margin:d,columns:o}=n;t&&r.setProperty("--max-width",t),i&&r.setProperty("--gutter",i),d&&r.setProperty("--margin",d),o&&function(n){if(e.childElementCount<n)for(let r=0;r<n;r++){const n=document.createElement("div");n.classList.add("column"),e.appendChild(n)}else{if(!(e.childElementCount>n))return;for(let r=e.childElementCount;r>n;r--)e.removeChild(e.lastElementChild)}}(o)}t.id="grid-controller",t.innerHTML='\n      <header><span>Grid System</span><span class="close-grid-controller">×</span></header><main><label><input type="radio" name="grid" checked="" id="grid-carbon">Carbon</label><label><input type="radio" name="grid" id="grid-adobe">Adobe</label><label><input type="radio" name="grid" id="grid-material">Material</label></main>\n      ',document.body.appendChild(t);const d=()=>{window.innerWidth<320?i({columns:4,gutter:"16px",margin:"0px"}):window.innerWidth<672?i({columns:8,gutter:"16px",margin:"16px"}):window.innerWidth<1056||window.innerWidth<1312?i({columns:16,gutter:"16px",margin:"16px"}):window.innerWidth>1584&&i({columns:16,gutter:"16px",margin:"24px",maxWidth:"1584px"})},o=()=>{window.innerWidth<304?i({columns:12,gutter:"16px",margin:"0px",maxWidth:"304px"}):window.innerWidth<768?i({columns:12,gutter:"16px",margin:"0px",maxWidth:"unset"}):window.innerWidth<1280?i({columns:12,gutter:"24px",margin:"0px",maxWidth:"unset"}):window.innerWidth<1768?i({columns:12,gutter:"32px",margin:"0px",maxWidth:"1280px"}):window.innerWidth<2160?i({columns:16,gutter:"40px",margin:"0px",maxWidth:"1280px"}):window.innerWidth>2160&&i({columns:16,gutter:"48px",margin:"0px",maxWidth:"1280px"})},a=()=>{window.innerWidth<480?i({columns:4,gutter:"16px",margin:"0px"}):window.innerWidth<720?i({columns:8,gutter:"24px",margin:"0px"}):window.innerWidth>720&&i({columns:12,gutter:"24px",margin:"0px"})},l=()=>{document.querySelector("#grid-carbon").checked?(window.removeEventListener("resize",o),window.removeEventListener("resize",a),window.addEventListener("resize",d),d()):document.querySelector("#grid-adobe").checked?(window.removeEventListener("resize",d),window.removeEventListener("resize",a),window.addEventListener("resize",o),o()):document.querySelector("#grid-material").checked&&(window.removeEventListener("resize",d),window.removeEventListener("resize",o),window.addEventListener("resize",a),a())};l(),window.addEventListener("click",l),document.querySelector(".close-grid-controller").addEventListener("click",(()=>{t.remove(),e.remove()}))})();