js实现grid布局
使用 CSS Grid 布局
CSS Grid 是现代网页布局的强大工具，通过 JavaScript 动态操作 Grid 可以实现灵活的布局调整。
基本 Grid 布局
通过 CSS 定义 Grid 容器和项目：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background: #ddd;
padding: 20px;
}JavaScript 动态修改 Grid
通过 DOM API 获取元素并修改 Grid 属性：
const container = document.querySelector('.grid-container');
// 修改列数
container.style.gridTemplateColumns = 'repeat(4, 1fr)';
// 添加新项目
const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'New Item';
container.appendChild(newItem);响应式 Grid 调整
根据窗口大小动态调整布局：
function updateGrid() {
if (window.innerWidth < 600) {
container.style.gridTemplateColumns = '1fr';
} else {
container.style.gridTemplateColumns = 'repeat(3, 1fr)';
}
}
window.addEventListener('resize', updateGrid);动态 Grid 模板
使用 JavaScript 生成复杂的 Grid 模板：
const areas = ['header', 'main', 'sidebar', 'footer'];
container.style.gridTemplateAreas = `
"${areas[0]} ${areas[0]} ${areas[0]}"
"${areas[1]} ${areas[1]} ${areas[2]}"
"${areas[3]} ${areas[3]} ${areas[3]}"
`;拖拽重新排序
实现 Grid 项目的拖拽排序功能：
let draggedItem = null;
document.querySelectorAll('.grid-item').forEach(item => {
item.draggable = true;
item.addEventListener('dragstart', () => {
draggedItem = item;
setTimeout(() => item.style.display = 'none', 0);
});
item.addEventListener('dragend', () => {
setTimeout(() => item.style.display = 'block', 0);
draggedItem = null;
});
});
container.addEventListener('dragover', e => {
e.preventDefault();
});
container.addEventListener('drop', e => {
e.preventDefault();
container.insertBefore(draggedItem, document.elementFromPoint(e.clientX, e.clientY));
});动画过渡效果
为 Grid 布局变化添加平滑过渡：
.grid-container {
transition: grid-template-columns 0.3s ease;
}浏览器兼容性处理
检测并处理不支持 Grid 的情况：
if (!CSS.supports('display', 'grid')) {
container.classList.add('no-grid');
// 添加回退布局代码
}
