嘿，这两个CSS Grid的问题我很熟悉，给你详细拆解解决方案！

要实现这个效果，核心是利用Grid的对齐属性控制整个网格在容器内的位置，步骤很清晰：

1. 先给网格容器设置一个最小高度（比如min-height: 300px）——毕竟得有足够的垂直空间，才能让元素“沉”到底部；
2. 用align-content: end：这个属性管的是网格行在容器垂直方向的排列位置，end会把所有行整体推到容器底部；
3. 搭配justify-content: start：这个属性控制网格列在水平方向的位置，start就能让元素乖乖靠左对齐。

给你个完整的示例代码：

.grid-container {
  display: grid;
  min-height: 300px; /* 必须设置高度才能看到垂直对齐效果 */
  grid-template-columns: repeat(2, 1fr); /* 这里是示例的2列布局，你可以按需调整 */
  gap: 10px; /* 可选：给元素之间加些间距，看起来更舒服 */
  align-content: end; /* 把所有元素推到容器底部 */
  justify-content: start; /* 元素整体向左对齐 */
}

.grid-item {
  padding: 1rem;
  background: #eee;
  border-radius: 4px;
}

<div class="grid-container">
  <div class="grid-item">元素1</div>
  <div class="grid-item">元素2</div>
  <div class="grid-item">元素3</div>
</div>

原理很简单：align-content作用的是整个网格轨道（所有行的集合），不是单个元素，所以能实现整体下沉，再配合justify-content的左对齐，完全符合你的需求。

你的需求是：按钮总数为奇数时，首行只放1个，剩下的每行2个。当前代码是固定2列，但没处理奇数的特殊情况，咱们用CSS选择器+Grid列跨越就能搞定。

最优解决方案（现代浏览器）： #

利用:has()伪类检测容器内的按钮数量是否为奇数（也就是最后一个按钮是奇数位置），然后让第一个按钮直接占满整行。

修改后的CSS代码：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 保持你原本的2列布局 */
  gap: 10px; /* 可选：按钮之间加间距 */
  padding: 1rem;
}

/* 当最后一个按钮是奇数（总数量为奇数）时，第一个按钮占满一行 */
.container:has(button:nth-child(odd):last-child) button:first-child {
  grid-column: 1 / -1; /* 跨越从第1列到最后一列，也就是占满整行 */
}

button {
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

HTML保持你原来的结构就行：

<div class="container">
  <button>A</button>
  <button>B</button>
  <button>C</button>
  <button>D</button>
  <button>E</button>
</div>

效果说明： #

• 当按钮数是5（奇数）时，A会单独占首行，B和C一行，D和E一行，完全符合你的期望；
• 如果按钮数变成偶数（比如4个），这个样式会自动失效，回到每行2个的正常布局，非常灵活。

兼容旧版浏览器的方案： #

如果需要兼容不支持:has()的旧浏览器（比如老版Firefox），可以用JS动态给容器加个类名，再通过类名来设置样式：

const container = document.querySelector('.container');
const buttonCount = container.querySelectorAll('button').length;
if (buttonCount % 2 !== 0) {
  container.classList.add('odd-button-count');
}

然后把CSS里的:has()规则换成：

.container.odd-button-count button:first-child {
  grid-column: 1 / -1;
}

这样就能覆盖更多浏览器啦！

内容的提问来源于stack exchange，提问作者Daniel Pérez