今天我们来学习一下网格布局,效果图如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/94293513f4fdb99be36f1c104f3f6c9e.png)
首先第一步我们先在head标记里把style标签写上,然后去掉默认样式,代码如下图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4ae389f3946ff60abe5ece6b51c67edb.png)
第二步创建一个盒子模型,代码如下图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f0f2105aa497d36918ab961b981c2cc0.png)
我们首先给盒子的宽和高300px,然后给盒子一个颜色,比如红色。接着再给盒子一个1px的黑色边框,为了更好的在屏幕中显示我们给盒子加了一个margin值。
这样我们的盒子模型就创建好了,然后我们就可以添加网格代码了。
然后我们给盒子加上网格代码,这里要用到display:gird;做出一个3*3的网格,代码如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0e0961d76d6dee9d87e8fe52e1516f68.png)
最后我们加上选择器,给body里面写上div,网格布局就做好了,代码如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/14cb211789eb1b8d8f282627fda78aa4.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/93defa0a34ebec2423ad37ee92765df2.png)
那么我们今天的练习就完成了。