当前位置：首页 > JavaScript

js实现grid布局

2026-01-30 23:16:28JavaScript

Grid 布局基础实现

使用 CSS Grid 布局需要通过 display: grid 声明容器元素为网格布局。通过 grid-template-columns 和 grid-template-rows 定义网格的行列结构。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
  gap: 10px;
}

动态创建 Grid 布局

通过 JavaScript 动态修改 Grid 布局的属性，例如调整列数或行高：

const container = document.querySelector('.container');
container.style.gridTemplateColumns = 'repeat(4, 1fr)';
container.style.gridGap = '20px';

响应式 Grid 布局

结合 window.matchMedia 实现响应式布局，根据屏幕宽度调整网格列数：

function updateGrid() {
  const container = document.querySelector('.container');
  if (window.innerWidth < 768) {
    container.style.gridTemplateColumns = '1fr';
  } else {
    container.style.gridTemplateColumns = 'repeat(3, 1fr)';
  }
}

window.addEventListener('resize', updateGrid);
updateGrid(); // 初始化调用

网格项的动态操作

通过 JavaScript 动态添加或移除网格项，并保持布局的适应性：

function addGridItem(content) {
  const container = document.querySelector('.container');
  const newItem = document.createElement('div');
  newItem.classList.add('grid-item');
  newItem.textContent = content;
  container.appendChild(newItem);
}

// 示例调用
addGridItem('New Item');

高级 Grid 属性控制

使用 JavaScript 控制网格项的放置位置和跨度：

const gridItem = document.querySelector('.grid-item');
gridItem.style.gridColumn = '2 / 4'; // 跨越第2到第4列
gridItem.style.gridRow = '1 / 3';    // 跨越第1到第3行

网格自动填充与自适应

通过 auto-fill 和 minmax 实现自适应网格布局，动态调整列宽：

const container = document.querySelector('.container');
container.style.gridTemplateColumns = 'repeat(auto-fill, minmax(150px, 1fr))';

交互式网格布局调整

实现用户交互调整网格布局的功能，例如通过按钮切换布局模式：

document.getElementById('toggle-layout').addEventListener('click', () => {
  const container = document.querySelector('.container');
  container.classList.toggle('compact-mode');
});

对应的 CSS 可以定义两种布局模式：

.container.compact-mode {
  grid-template-columns: repeat(2, 1fr);
}

网格布局与数据绑定

结合数据动态生成网格布局，适用于内容管理系统或数据展示：

js实现grid布局

const data = ['Item 1', 'Item 2', 'Item 3'];
const container = document.querySelector('.container');
container.innerHTML = data.map(item => `<div class="grid-item">${item}</div>`).join('');