如何编写React.js中的Grid布局键盘组件？

本文共计795个文字，预计阅读时间需要4分钟。

前言；Grid布局是将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。display: grid指定一个容器采用网格布局。接着划分行和列。

grid-template-col

前言;

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

display: grid指定一个容器采用网格布局。接着划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

使用px，也可以使用百分比。如果重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

对于移动端来说，适配是头等大事。毕竟市面上型号那么多。

vw即（viewport width）可视窗口的宽度。vw是一个尺寸单位，那它的宽度等于多少呢？等于1%整个屏幕的宽度。