How can I minimize CSS code for responsive calculator buttons using order?

I am designing a responsive calculator, and I want to simplify the CSS code used for arranging the buttons.

Currently, I am using CSS Grid to handle the layout, but the code is getting lengthy because I have to manually define grid areas for each button. I was wondering if I could use Flexbox with the order property to reorder buttons dynamically for different screen sizes.

CSS Grid: I manually defined the grid-area for each button. While this approach works, it is very time-consuming and verbose, especially when I want to adapt the layout for multiple screen sizes.
Flexbox with order (Initial Attempt): I attempted to use Flexbox and reordered the buttons using the order property. However, managing the order for multiple screen sizes became tricky, and writing separate order values for all elements felt inefficient.
Combination of Both: I also tried combining CSS Grid for the main layout and Flexbox for adjusting the order dynamically. Although it partially worked, the resulting code became too lengthy, and I believe there might be a simpler, more efficient way to achieve this.

@media (max-height: 420px) {
  .keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas: "num1 num6 num11 num21" "num2 num3 num4 num5" "num7 num8 num9 num10" "num12 num13 num14 num15" "num17 num18 num19 num20" "num22 num23 num24 num25";
  }
  .num16 {
    display: none;
  }
  .num1 {
    grid-area: num1;
  }
  .num2 {
    grid-area: num2;
  }
  .num3 {
    grid-area: num3;
  }
  .num4 {
    grid-area: num4;
  }
  .num5 {
    grid-area: num5;
  }
}

<div class="keys">
  <div class="sighn num5">&divide;</div>
  <div class="sighn num6">&#x221A;x</div>
  <div class="number num7">7</div>
  <div class="number num8">8</div>
  <div class="number num9">9</div>
  <div class="sighn num10">&times;</div>
  <div class="sighn num11">
    <div>X <sup>2</sup></div>
  </div>
  <div class="number num12">4</div>
  <div class="number num13">5</div>
  <div class="number num14">6</div>
  <div class="sighn num15">&#x2212;</div>
  <div class="sighn num16">
    <div>X <sup>3</sup></div>
  </div>
  <div class="number num17">1</div>
  <div class="number num18">2</div>
  <div class="number num19">3</div>
  <div class="sighn num20">&#x002B;</div>
  <div class="sighn num21">
    <span class="number1">1</span><span>/</span> <span>x</span>
  </div>
  <div class="sighn num22">
    <span class="sighn-b">+</span><span>/</span><span>-</span>
  </div>
  <div class="number num23">0</div>
  <div class="sighn num24">.</div>
  <div class="sighn num25">=</div>
</div>

Solution

Simplified Responsive Calculator Layout Using CSS Grid The following example uses CSS Grid for a clean and responsive calculator layout. It avoids verbose grid-area declarations and minimizes manual ordering.

`

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 5px; /* Add space between buttons */
  max-width: 400px;
  margin: 0 auto; /* Center the layout */
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 1.2rem;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  border-radius: 5px;
  cursor: pointer;
}

/* Responsive design for smaller screens */
@media (max-height: 420px) {
  .hide {
    display: none; /* Hide specific buttons */
  }
}

<div class="calculator">
  <div class="btn">&divide;</div>
  <div class="btn">&radic;x</div>
  <div class="btn">7</div>
  <div class="btn">8</div>
  <div class="btn">9</div>
  <div class="btn">&times;</div>
  <div class="btn">x<sup>2</sup></div>
  <div class="btn">4</div>
  <div class="btn">5</div>
  <div class="btn">6</div>
  <div class="btn">&minus;</div>
  <div class="btn hide">x<sup>3</sup></div>
  <div class="btn">1</div>
  <div class="btn">2</div>
  <div class="btn">3</div>
  <div class="btn">&plus;</div>
  <div class="btn">1/x</div>
  <div class="btn">&plusmn;</div>
  <div class="btn">0</div>
  <div class="btn">.</div>
  <div class="btn">=</div>
</div>