JavaScript动态切换网格布局的核心是修改display、grid-template-columns等CSS Grid属性，可通过类名切换预设模板、窗口宽度自适应、数据量驱动列数计算，并借助CSS变量实现平滑过渡效果。
用 JavaScript 动态切换网格布局排版，核心是通过修改元素的 display、grid-template-columns、grid-auto-rows 等 CSS Grid 属性，配合类名控制或内联样式更新，实现响应式或交互式布局变化。
用 class 切换预设网格结构
提前在 CSS 中定义多种网格模板，JavaScript 只负责切换类名，简洁高效、易于维护。
- 在 CSS 中写好不同布局：
.grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 12px; }
.grid-3x3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }
.grid-list { display: grid; grid-template-columns: 1fr; grid-gap: 4px; }- JS 中绑定按钮事件，切换容器类名：
const container = document.getElementById('grid-container');
document.getElementById('btn-2x2').onclick = () => container.className = 'grid-2x2';
document.getElementById('btn-3x3').onclick = () => container.className = 'grid-3x3';
document.getElementById('btn-list').onclick = () => container.className = 'grid-list';运行时动态计算并设置 grid-template-columns
适合根据屏幕宽度、数据量或用户偏好实时生成列数，比如“每行最多显示 N 项”逻辑。
- 根据窗口宽度自动适配列数（如：≥768px → 3列；≥480px → 2列；否则 1列）：
function updateGridColumns() {
const container = document.getElementById('grid-container');
let cols = 1;
if (window.innerWidth >= 768) cols = 3;
else if (window.innerWidth >= 480) cols = 2;
container.style.display = 'grid';
container.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
container.style.gap = `${8 * cols}px`; // 可选：随列数微调间距
}
window.addEventListener('resize', updateGridColumns);
updateGridColumns(); // 初始化结合数据驱动，按 item 数量调整布局
当网格内容由 JS 数据渲染时，可让列数智能匹配内容密度，避免最后一行大量留白。
立即学习“Java免费学习笔记（深入）”；
- 例如：有 11 个卡片，希望尽量填满且每行不超过 4 个 → 自动设为 4 列（3 行）：
- 用
Math.min()限制最大列数，Math.ceil()确保不溢出：
function setGridByItemCount(itemCount, maxCols = 4) {
const container = document.getElementById('grid-container');
const cols = Math.min(maxCols, Math.max(1, Math.ceil(Math.sqrt(itemCount))));
container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
}
// 调用示例（渲染完数据后）
setGridByItemCount(data.length, 5);配合 transition 实现平滑切换效果
CSS Grid 的部分属性（如 grid-template-columns）本身不支持过渡动画，但可通过间接方式模拟流畅变化：
- 给容器加
transition: all 0.3s ease;（对gap、opacity或子项 transform 有效） - 更可靠的做法：先用
getComputedStyle读取当前尺寸，再用requestAnimationFrame分步更新，或借助 CSS 自定义属性 + transition：
:root { --grid-cols: 2; }
#grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-cols), 1fr);
transition: --grid-cols 0.35s ease;
}
// JS 中改 CSS 变量（触发 transition）
document.documentElement.style.setProperty('--grid-cols', '3'); 
