哎~又到了学习网格布局的时候了GRID布局入门

.grid{显示：网格；网格模板列：60px60px60px60px；网格模板行：60px60px60px60px；grid-gap:5px;}.grid>div{背景：灰色;/*别被下面的代码搞糊涂了，只是为了好看，哈哈*/display:flex;颜色：#fff；字体大小：150%；证明内容：居中；align-items:center;}grid-template-columnsgrid-template-columns用于定义网格列的宽度和轨道的宽度。代码表示容器分为4列，列宽60px。宽度可以随意改变。grid-template-rowsgrid-template-rows用于定义网格行的高度，代码表示容器被分成4行。通过上面两行代码，实现了4*4的网格划分。如果您不相信我，请尝试增加div的数量。grid-gap用来控制网格的间距，准确的说是用来控制网格区域的间距。控制项到此为止，我们的css好像都应用到了容器上了，那么高级点怎么办呢？代码1