Vue中如何实现行列尺寸统一对齐？

你的布局错乱核心原因是同时混用了Vuetify栅格系统和自定义CSS Grid，两者的布局逻辑相互冲突，另外Vuetify的结构使用也不符合规范，导致自动行列调整失效。以下是具体修复方案：

关键问题点 #

• Vuetify的v-layout row（应使用v-row）与自定义CSS Grid的布局规则互相干扰，无法正常生效
• 直接在栅格容器外放置display元素、添加多余空div，破坏了布局结构
• CSS中border: 1px sold black是拼写错误（sold应为solid）

修复后的完整代码 #

推荐直接使用CSS Grid实现计算器布局（更适配计算器的固定网格结构），移除Vuetify栅格组件以避免冲突：

<template>
  <div class="calculator">
    <div class="display">10</div>
    <v-btn class="btn">c</v-btn>
    <v-btn class="btn">+/-</v-btn>
    <v-btn class="btn">%</v-btn>
    <v-btn class="operator">÷</v-btn>
    <v-btn class="btn">7</v-btn>
    <v-btn class="btn">8</v-btn>
    <v-btn class="btn">9</v-btn>
    <v-btn class="operator">x</v-btn>
    <v-btn class="btn">4</v-btn>
    <v-btn class="btn">5</v-btn>
    <v-btn class="btn">6</v-btn>
    <v-btn class="operator">-</v-btn>
    <v-btn class="btn">1</v-btn>
    <v-btn class="btn">2</v-btn>
    <v-btn class="btn">3</v-btn>
    <v-btn class="operator">+</v-btn>
    <v-btn class="btn zero">0</v-btn>
    <v-btn class="btn">.</v-btn>
    <v-btn class="operator">=</v-btn>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 60px; /* 固定行高，确保按钮大小一致 */
  gap: 1px; /* 添加间隙，模拟计算器边框 */
  max-width: 300px; /* 限制计算器宽度 */
}

.display {
  background-color: black;
  color: white;
  grid-column: 1 / 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  font-size: 1.5rem;
}

.zero {
  grid-column: 1 / 3;
}

.btn {
  font-size: large;
  color: black;
  background-color: rgb(236, 232, 232);
  border: 1px solid black;
  width: 100%;
  height: 100%;
}

.operator {
  font-size: large;
  background-color: orange;
  border: 1px solid black;
  width: 100%;
  height: 100%;
}
</style>

核心调整说明 #

1. 移除冲突组件：删掉Vuetify的v-container、v-layout/v-row、v-col，避免与CSS Grid的布局逻辑冲突
2. 规整Grid结构：按计算器按键的自然顺序排列元素，通过Grid规则自动分配位置
3. 统一按钮尺寸：给按钮添加width: 100%和height: 100%，确保填满Grid单元格；设置固定grid-auto-rows让所有行高一致
4. 修复样式错误：修正border属性的拼写错误，添加gap模拟按键间的边框效果，优化显示区域的样式
5. 简化结构：移除多余的空div，让模板结构更清晰

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