CSS grid布局实现键盘

                                 利用CSS grid布局实现键盘

用到的知识点

1. grid布局时二维的
2. gap 是两个item的间距
3. 合并两个单元格用到了span（与html中的span标签不一样），span number 是合并几个单元格
4. grid-column : span number ;是合并这一行的几个单元格
5. grid-template-columns: repeat(30,30px);是创建一个一行30个单元格每个单元格30像素
   下边是代码

    
    
    
    


    

        
~
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
0
        
-
        
=
        
Backspace
        
Tab
        
Q
        
W
        
E
        
R
        
T
        
Y
        
U
        
I
        
O
        
P
        
{
        
}
        
\
        
Capslock
        
A
        
S
        
D
        
F
        
G
        
H
        
J
        
K
        
L
        
;
        
'
        
Enter
        
Shift
        
Z
        
X
        
C
        
V
        
B
        
N
        
M
        
,
        
.
        
/
        
Shift
        
Ctrl
        
Fn
        
Win
        
Alt
        
Space
        
Alt
        
Ctrl
        
Command
/*因为本人键盘这个区域是方向键便用command代替*/
    

有什么问题欢迎批评指正，不喜勿喷。