0
Students
Create a keyboard component using the capabilities of the CSS Flex and CSS Grid modules
In this challenge, you have access to the layout of the top row of the keyboard and helper classes. Based on them, finalize the component in accordance with the layout.
Keys
- By default, each key occupies 2 columns inside the grid
- Text inside keys must be centered on all axes
- Spacing between keys:
10px
- Mnemonics that will help to mark up buttons:
<
:<
>
:>
ᐊ
:ᐊ
ᐃ
:ᐃ
ᐁ
:ᐁ
ᐅ
:ᐅ
Based on the layout of the keys in the template, you will need to create additional helper classes like span-*
Hints
- Before you start, calculate the optimal number of columns within the grid. The size of each column will be
1fr
. For calculations, analyze the first row, which is available in the index.html file - The classes
p-0
,border-none
, andw-100
will help you lay out the up and down keys
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.