如何实现无间隙左对齐div组整体居中且保持响应式

仅使用HTML/CSS完全可以实现该需求，不需要JavaScript。
之前测试grid、flex、inline-block方案未达预期，核心是没有同时处理好「容器宽度自适应内容」和「容器自身居中」两个逻辑，最终效果可完全满足要求：

• 整组div块整体水平居中
• 组内div块始终左对齐排列，最后一行不满列数时也不会出现居中错位
• 块之间无多余间隙
• 布局自动响应视口宽度，列数随视口大小自动增减
• div内部内容可自由设置左对齐、居中、右对齐，不影响整体布局

推荐方案：CSS Grid实现（兼容性好、代码最简） #

核心思路：

1. 块组容器使用Grid布局，通过auto-fit实现响应式列数，固定每个块的宽度为目标值
2. width: fit-content是实现该效果的核心属性，让容器宽度自动适配当前视口下能容纳的最多列数的总宽度，不会默认占满父级整行
3. 给容器设置margin: 0 auto实现容器自身的水平居中
4. 块间隙可通过gap自由控制，需要无间隙直接设为0即可

完整可运行代码：

<!DOCTYPE html>
<html>
<head>
<style>
/* 外层演示容器，可根据实际需求删除 */
.outer-wrap {
  background-color: DodgerBlue;
  padding: 10px 0;
}
.block-group {
  display: grid;
  /* 响应式列，每列固定210px，自动根据视口宽度计算列数 */
  grid-template-columns: repeat(auto-fit, 210px);
  gap: 0; /* 块之间无多余间隙，需要自定义间距可修改该值 */
  width: fit-content;
  margin: 0 auto; /* 块组整体水平居中 */
}
.block-group > div {
  background-color: #f1f1f1;
  line-height: 75px;
  font-size: 30px;
  border: 1px solid black;
  /* 内部内容对齐方式可自由修改，不影响整体布局 */
  text-align: center;
}
</style>
</head>
<body>
<div class="outer-wrap">
  <div class="block-group">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
  </div>
</div>
</body>
</html>

如果偏好Flex布局，实现逻辑和Grid方案一致：给flex容器设置display: flex; flex-wrap: wrap;、固定子项宽度、width: fit-content、margin: 0 auto也能实现相同效果，但响应式列宽适配的灵活度不如Grid方案。

之前测试方案的问题说明 #

• 初始inline-block方案：容器默认是块级元素，宽度100%占满整行，直接加text-align: center会让所有行内块元素（包括最后一行不满列数的块）都居中，不符合组内左对齐的要求。如果要沿用inline-block逻辑，只要给装块的容器加上width: fit-content;margin:0 auto，保留font-size:0消除行内块默认间隙，也能实现效果，但响应式适配不如Grid方案灵活。
• inline-grid测试方案：一是写死了3列grid-template-columns: auto auto auto，自然无法实现响应式；二是没有给grid容器设置居中属性，inline-grid作为行内块级元素，给父容器加text-align:center，或者给自身加width:fit-content; margin:0 auto即可实现居中。

效果参考 #

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