Html: Компонент «Клавиатура»

Создайте компонент клавиатуры, используя возможностей модулей CSS Flex и CSS Grid

В этом испытании вам доступна разметка верхнего ряда клавиатуры и вспомогательные классы. Ориентируясь на них, доработайте компонент в соответствии с макетом.

Клавиши

• По умолчанию, каждая клавиша занимает 2 колонки внутри сетки
• Текст внутри клавиш должен быть отцентрован по всем осям
• Расстояние между клавишами: 10px
• Мнемоники, которые помогут в вёрстке кнопок:
  • <: <
  • >: >
  • ᐊ: ᐊ
  • ᐃ: ᐃ
  • ᐁ: ᐁ
  • ᐅ: ᐅ

Исходя из расположении клавиш в шаблоне вам понадобиться создать дополнительные вспомогательные классы вида span-*

Подсказки

• Перед началом работы высчитайте оптимальное количество колонок внутри сетки. Размер каждой колонки будет равняться 1fr. Для расчётов проанализируйте первый ряд, который доступен в файле index.html
• Классы p-0, border-none и w-100 помогут сверстать клавиши вверх и вниз