如何实现CSS Grid多行后换行并排布局？

当前已实现左侧深色方块的CSS Grid布局，需求是让方块在若干行后自动换行，新的行组并排显示（类似目标图中红色方块的效果），但尝试限制Grid高度后无效，方块会超出容器范围。相关代码如下：

现有JS代码 #

function createBlockGrid() {
  for (let i = 0; i < BOARD_BLOCK_GRID_ROWS; i++) {
    for (let j = 0; j < BOARD_BLOCK_GRID_COLUMNS; j++) {
      const square = document.createElement('div');
      square.classList.add(`square`);
      square.setAttribute('id', `y${i}, x${j}`);
      BOARD_BLOCKS.append(square);
    }
  }
}

现有CSS代码 #

.square {
  width: 16px;
  height: 16px;
  background-color: #1d1d1d;
  box-shadow: 0 0 2px #000;
  transition: 1s ease;
}

#blocks {
  display: grid;
  grid-template-columns: repeat(4, 20px);
  grid-template-rows: repeat(63, 20px);
}

现有HTML代码 #

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Board</title>
  <link rel="stylesheet" href="css/board.css">
</head>

<body>
  <div class="left-side">
    <div id="blocks"></div>
  </div>

  <!-- script src="js/board.js"></script -->
</body>

方案1：单Grid容器实现自动列换行（推荐） #

核心思路是利用grid-auto-flow: column让Grid在填满指定行数后，自动新建列来容纳后续方块，配合max-height限制单个行组的高度，避免溢出。

修改后的CSS代码：

.square {
  width: 16px;
  height: 16px;
  background-color: #1d1d1d;
  box-shadow: 0 0 2px #000;
  transition: 1s ease;
}

#blocks {
  display: grid;
  grid-template-columns: repeat(4, 20px); /* 每个行组的列数 */
  grid-template-rows: repeat(8, 20px); /* 每组的行数，可按需修改 */
  grid-auto-flow: column; /* 填满当前行组后，自动创建新列 */
  max-height: 160px; /* 等于 行数*行高，8*20=160，严格限制高度 */
  gap: 8px; /* 可选，行组之间的间距 */
}

说明：

• grid-auto-flow: column改变Grid填充方向，从默认的行优先改为列优先，填满设定的8行4列后，自动新建一列放置后续方块，实现“多行后并排”效果。
• max-height必须精确匹配单个行组的高度，确保超出内容自动流入新列，不会溢出容器。

方案2：拆分独立行组容器（更灵活） #

如果需要对每个行组单独设置样式或交互，可以把每N行的方块封装到独立的子Grid容器中，再用Flex布局排列这些子容器。

修改后的JS代码

const GROUP_ROWS = 8; // 每组的行数，可按需修改
function createBlockGrid() {
  // 计算需要的行组总数
  const totalGroups = Math.ceil(BOARD_BLOCK_GRID_ROWS / GROUP_ROWS);
  
  for (let group = 0; group < totalGroups; group++) {
    // 创建行组容器
    const groupContainer = document.createElement('div');
    groupContainer.classList.add('block-group');
    BOARD_BLOCKS.append(groupContainer);
    
    // 填充当前行组的方块
    const startRow = group * GROUP_ROWS;
    const endRow = Math.min(startRow + GROUP_ROWS, BOARD_BLOCK_GRID_ROWS);
    
    for (let i = startRow; i < endRow; i++) {
      for (let j = 0; j < BOARD_BLOCK_GRID_COLUMNS; j++) {
        const square = document.createElement('div');
        square.classList.add(`square`);
        square.setAttribute('id', `y${i}, x${j}`);
        groupContainer.append(square);
      }
    }
  }
}

修改后的CSS代码

.square {
  width: 16px;
  height: 16px;
  background-color: #1d1d1d;
  box-shadow: 0 0 2px #000;
  transition: 1s ease;
}

#blocks {
  display: flex;
  flex-wrap: wrap; /* 行组超出宽度后自动换行 */
  gap: 8px; /* 行组之间的间距 */
}

.block-group {
  display: grid;
  grid-template-columns: repeat(4, 20px);
  grid-template-rows: repeat(8, 20px);
}

说明：

• 每个行组是独立的Grid容器，父容器用Flex实现行组的并排和换行，灵活度更高，适合复杂场景。
• 可单独给.block-group添加边框、背景等样式，方便区分不同行组。

内容的提问来源于stack exchange，提问作者levoo777