先看看你写的代码，方便咱们定位问题：

div#buttons {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto;
}
button#one { grid-column: 1/2; }
button#two { grid-column: 2/3; }
button#three { grid-column: 4/5; }
button#four { grid-column: 3/4; /* grid-area: 1/3/2/4; */ }

<div id="buttons">
  <button id="one">One</button>
  <button id="two">Two</button>
  <button id="three">Three</button>
  <button id="four">Four</button>
</div>

嘿，这个问题其实是Grid布局自动放置算法的“小脾气”导致的～我来给你拆解一下：

首先，你定义了一个4列1行的显式网格，但你只给按钮指定了grid-column，没管grid-row，这时候Grid就会用默认的自动放置规则来安排行的位置。

咱们按HTML里按钮的顺序捋一遍放置过程：

• 按钮One放在第1列，Two放在第2列，这俩都乖乖待在第一行。
• 接下来是按钮Three，你让它去第4列，它也顺利占了第一行的第4列。这时候第一行的第3列其实是空着的，但问题来了——
• 轮到按钮Four的时候，Grid的默认自动流（grid-auto-flow: row）是“按顺序往前走，不回头填坑”的模式。它不会主动去看前面有没有空缺的单元格，而是直接找下一个能放下Four的位置，结果就只能新开一行，把Four放在第二行的第3列了。

而你注释掉的grid-area: 1/3/2/4之所以管用，是因为它直接把Four的行位置锁死在了第一行（1/2就是行从第1轨道到第2轨道，也就是第一行），相当于告诉Grid“别瞎找了，就放这儿”，自然就不会换行啦。

如果不想用grid-area，你也可以试试给容器加上grid-auto-flow: row dense，这样Grid就会主动填充前面的空缺，Four也能乖乖待在第一行的第3列了。

内容来源于stack exchange