今天我们来学习一下网格布局，效果图如下：
首先第一步我们先在head标记里把style标签写上，然后去掉默认样式，代码如下图：
第二步创建一个盒子模型，代码如下图：
我们首先给盒子的宽和高300px，然后给盒子一个颜色，比如红色。接着再给盒子一个1px的黑色边框，为了更好的在屏幕中显示我们给盒子加了一个margin值。
这样我们的盒子模型就创建好了，然后我们就可以添加网格代码了。
然后我们给盒子加上网格代码，这里要用到display:gird;做出一个3*3的网格，代码如下：
最后我们加上选择器，给body里面写上div，网格布局就做好了，代码如下：
那么我们今天的练习就完成了。