CSS Grid异常溢出问题：实现底部对齐的1:1图片输入框

问题回顾 #

需要实现两列CSS Grid布局：

• 第一列包含多个表单项
• 第二列的1:1正方形图片输入框与第一列底部对齐
• 不能用aspect-ratio，禁止魔法数值和JavaScript

修改后的代码 #

CSS

body {
  background: #eee;
}
section {
  margin: 2rem;
  padding: 2rem;
  background: white;
}
input {
  background: #eee;
  border: 0.05rem solid black;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满剩余空间，第二列自适应内容宽度 */
  gap: 2rem;
  align-items: end; /* 强制两列底部对齐 */
}
.form-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.form-item ~ .form-item {
  margin-top: 2rem;
}

/* 可选：限制正方形最大宽度，避免在宽屏上过大 */
.grid > .form-item:last-child {
  max-width: 15rem;
}

.image-input-container {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 利用padding百分比基于宽度的特性，实现1:1比例 */
}
.image-input {
  background: #eee;
  border: 0.05rem solid black;
  border-radius: 0.5rem;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

HTML

<section>
  <div class="grid">
  
    <div>
      <div class="form-item">
        <label>Name</label>
        <input>
      </div>
      <div class="form-item">
        <label>Description</label>
        <input>
      </div>
    </div>
    
    <div class="form-item">
      <label>Image</label>
      <div class="image-input-container">
        <button class="image-input">+</button>
      </div>
    </div>
    
  </div>
</section>

关键修改说明 #

1. Grid底部对齐：给.grid设置align-items: end，直接让两列的底部自动对齐，无需额外调整内部元素位置。
2. 1:1正方形兼容实现：用padding-top: 100%替代原方案的左右padding，padding的百分比值基于元素自身宽度计算，完美实现宽高1:1比例，兼容所有不支持aspect-ratio的旧浏览器。
3. 自适应列宽：grid-template-columns: 1fr auto让第一列占满可用空间，第二列仅占用正方形所需的宽度，不会溢出容器；可选的max-width用于限制正方形最大尺寸，避免在宽屏上过大。
4. 无魔法数值：所有尺寸均为相对值或基于布局自动计算，没有硬编码的固定数值（可选的max-width属于合理的范围限制，而非魔法数值）。

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