Upon examining the image, it's clear that none of the columns and rows align properly and are all varying sizes. I am relatively new to JavaScript and Vue, so any assistance would be greatly appreciated. As far as my understanding from online resources goes, the v-row should automatically adjust the row and the v-col based on the number of elements within v-col, but it doesn't seem to work as intended. Am I missing something here?
<template>
<div class="calculator">
<v-container>
<v-layout row >
<div class="display">10</div>
<v-col>
<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-col>
<v-col>
<div></div>
<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-col>
<v-col>
<div></div>
<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-col>
<v-col>
<div></div>
<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-col>
<v-col>
<div></div>
<v-btn class = "btn zero">0</v-btn>
<v-btn class = "btn">.</v-btn>
<v-btn class = "operator">=</v-btn>
</v-col>
</v-layout>
</v-container>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
.calculator {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: minmax(50px,auto);
}
.display {
background-color:black;
grid-column: 1 / 5 ;
}
.zero {
grid-column: 1 / 3;
}
.btn {
font-size: large;
color:black;
background-color: rgb(236, 232, 232);
border: 1px sold black;
}
.operator {
font-size: large;
background-color: orange;
border: 1px sold black;
}
</style>