@webreflection/ascii-grid/es.js

Probably the easiest way to define grids layouts

/*! (c) Andrea Giammarchi */
self.t=t=>{const e=(t=>{let e,r=0;const s=/\S+/g,n=[],a=new Map([[".","."]]);for(const o of t.split(/[\r\n]+/)){const t=[];for(;e=s.exec(o);){const[s]=e;a.has(s)||a.set(s,"g"+r++),t.push(a.get(s))}t.length&&n.push(t)}return n})(t),r=e.flat().filter((t=>"."!==t));return t=e.map((t=>`"${t.join(" ")}"`)).join(" "),{applyTo(e){let s=0;const n=new Map,{children:a,style:o}=e;o.display="grid",o["grid-template-areas"]=t;for(const t of r)if(!n.has(t)){const e=a[s++];e.style["grid-area"]=t,n.set(t,e)}return e},cssFor(e){let s=0;const n=new Set,a=[`${e}{display:grid;grid-template-areas:${t}}`];for(const t of r)n.has(t)||(a.push(`${e}>*:nth-child(${++s}){grid-area:${t}}`),n.add(t));return a.join("\n")}}};export{t as default};