Как я могу свести к минимуму код CSS для адаптивных кнопок калькулятора с помощью порядка? ⇐ CSS

[Anonymous]

Я разрабатываю адаптивный калькулятор и хочу упростить код CSS, используемый для расположения кнопок.
В настоящее время я использую CSS Grid для управления макетом, но код становится длинным, потому что мне приходится вручную определять области сетки для каждой кнопки. Мне было интересно, могу ли я использовать Flexbox со свойством order для динамического изменения порядка кнопок для разных размеров экрана.

• CSS Grid:
  I вручную определили область сетки для каждой кнопки. Хотя этот подход работает, он требует очень много времени и многословия, особенно когда я хочу адаптировать макет для экранов разных размеров.
• Flexbox с порядком (первоначальная попытка):
  Я попытался использовать Flexbox и изменил порядок кнопок, используя свойство order. Однако управлять порядком для экранов разных размеров стало сложнее, а писать отдельные значения порядка для всех элементов оказалось неэффективно.
• Комбинация того и другого:Я также попробовал объединить CSS Grid для основного макета и Flexbox для динамической настройки порядка. Хотя частично это сработало, полученный код оказался слишком длинным, и я считаю, что можно найти более простой и эффективный способ добиться этого.

Код: Выделить всё

@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;
}
}

Код: Выделить всё

÷
√x
7
8
9
×

X 2

4
5
6
−

X 3

1
2
3
+

1/ x

+/-

0
.
=

Подробнее здесь: https://stackoverflow.com/questions/792 ... sing-order