Port CSS Grid layout fix for multi-panel layouts (quad/6-panel non-interactive panels)

[carochacs]

Background

Comparing against the sibling slopsmith-plugin-splitscreen repo (shares this plugin's architecture/CLAUDE.md), that repo's commit 3279a25 ("Switch quad and six layouts to CSS grid to fix non-interactive panels") fixed a real bug where flex-based multi-panel layouts left some panels non-interactive.

Current state here

This repo's LAYOUTS in screen.js still uses ad-hoc string styles (grid-tri, grid-2x2) capped at 4 panels (quad), rather than a generic {cols, rows, style:'grid'} shape:

const LAYOUTS = {
    'top-bottom':  { panels: 2, style: 'flex-col' },
    'left-right':  { panels: 2, style: 'flex-row' },
    'tri-top':     { panels: 3, style: 'grid-tri' },
    'tri-bottom':  { panels: 3, style: 'grid-tri' },
    'quad':        { panels: 4, style: 'grid-2x2' },
};

Ask

Investigate whether the same non-interactive-panel bug reproduces here for quad/tri-* layouts, and if so, port slopsmith's CSS Grid approach (display:grid; grid-template-columns/rows driven by cols/rows on each layout entry) to fix it. Consider whether to also add slopsmith's five/six layout options as a follow-up, once the grid rendering itself is confirmed solid here.

Reference

slopsmith-plugin-splitscreen screen.js (layout builder section, applyLayoutStyle/createWrap), commit 3279a25.