如何让内容不同的按钮保持相同尺寸且适配响应式布局？

你当前的代码中.options类重复定义了grid-template-columns属性，后面的auto auto会覆盖前面的1fr 1fr，导致网格列宽根据内容自适应，是两个按钮宽度不一致的核心原因。按照如下修改即可实现两个按钮宽度与原有「Create scenario」按钮宽度完全一致，且支持响应式：

CSS修改点 #

• 删掉.options中多余的grid-template-columns: auto auto;属性，保留grid-template-columns: 1fr 1fr;
• 给.options新增max-width: fit-content;、margin-inline: auto;属性，限制整个网格容器的最大宽度等于内容最长的按钮宽度，同时保持容器水平居中
• 取消.option类中width: 100%的注释，让按钮撑满所在网格列
• 移除.options中多余的float: right;属性，避免布局偏移

修改后完整CSS代码 #

.options {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 15em;
  margin-top: 6em;
  justify-items: center;
  max-width: fit-content;
  margin-inline: auto;

  .option-container {
    width: 100%;
    text-align: center;
    display: flex;
    border-radius: 12px;
    justify-content: right;

    .option {
      background-color: #49515C;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 2rem;
      border-radius: 12px;
      filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.4));

      .option-icon {
        filter: invert(100%) sepia(4%) saturate(7500%) hue-rotate(180deg) brightness(109%) contrast(122%);
        width: 45px;
        height: 45px;
      }

      .option-text {
        font-size: 20px;
        font-weight: 600;
        color: #ffffff;
        padding-left: 10px;
        font-family: "Exo 2", sans-serif;
      }
    }
  }

  .option-container:nth-child(2) {
    justify-content: left;
  }
}

原理解释 #

• grid-template-columns: 1fr 1fr保证两个网格列宽度完全相等
• max-width: fit-content限制整个网格容器的宽度由最长的子元素（即原有「Create scenario」按钮）的宽度决定，不会出现按钮被拉伸变大的问题
• 全程没有使用固定像素或百分比宽度，天然支持响应式布局，不同屏幕尺寸下两个按钮宽度始终保持一致

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