如何使用Grid布局实现元素左对齐、避免空间均分且控制每行元素数？

要实现你要的效果，核心是放弃用1fr均分列宽，让列宽自适应元素内容，同时保留Grid控制每行元素数量的特性。

解决初始布局的左对齐问题 #

你原Grid代码用repeat(2, minmax(0, 1fr))强制两列均分宽度，改成自适应列宽就能实现和Flex一致的左对齐效果，且无需额外嵌套：

#main-1 {
  display: grid;
  gap: 30px;
  /* 让两列宽度跟随元素内容，而非强制均分 */
  grid-template-columns: auto auto;
}

.test-1 {
  background-color: orange;
  grid-area: span 1 / span 2;
}

.test-2 {
  background-color: gray;
  width: 150px;
}

.test-1, .test-2 {
  height: 60px;
}

对应HTML保持不变即可，此时test-2元素会左对齐，列宽完全匹配元素实际宽度，不会强制占满容器一半空间。

解决动态宽度下每行固定两个元素的问题 #

针对你补充的场景（.first宽度动态，要求每行仅包含一个.first和一个.second），Grid可以直接通过列定义+自动流控制，避免inline-block的换行混乱：

#main {
  width: 120px;
  display: grid;
  gap: 8px; /* 可选，控制元素间距 */
  /* 第一列自适应.first宽度，第二列自适应.second内容 */
  grid-template-columns: auto fit-content(100%);
  /* 强制每行仅放两个元素，超出自动换行 */
  grid-auto-flow: row;
}

.first, .second {
  height: 60px;
}

.first {
  background-color: orange;
  width: 30px; /* 此处可替换为动态宽度值 */
}

.second {
  background-color: #eee;
}

<div id="main">
  <div class="first"></div>
  <p class="second">hhhhhh</p>
  <div class="first"></div>
  <p class="second">hhhhhh</p>
  <div class="first"></div>
  <p class="second">hhhhhh</p>
</div>

这样无论.first宽度如何变化，每行都会严格放置一个.first和一个.second，不会出现多个元素挤在一行的情况，同时所有元素保持左对齐，完全满足需求。

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