在日常小程序开发中，第一个遇到的问题是页面布局的问题。设计师给的设计稿通常是一个静态的图片，我们要把图片转换成实际可以使用的布局。在电商场景中，我们经常会看到商品的两列布局，通常在CSS中，两列布局可以使用网格布局的方案解决。我们本篇就讲解一下CSS的网格布局，并结合一个布局的小案例来讲解一下网格布局在实际场景中的应用。

网格布局

要想学习一个知识点，我们通常在MDN中查询会比较权威，百度输入关键词

网格布局 MDN

学习一共有两个关键点，第一个是知道，第二个是会用。知道考察的是你知识涉猎的范围，会用考察的是实际动手的能力。

在日常的交流过程中，初入门的往往喜欢一遇到问题就问。问当然比较便捷，但是一有问题就问，往往缺乏独立思考和解决问题的能力。这个形成一种依赖之后，便成了伸手党，如果日后你做了开发岗，你问的问题不见得同事会，同事会因为竞争的关系不见得愿意告诉你。

说了一些题外话，我们回归到正题，还是先看看这个知识点是什么意思

网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上

看定义其实就是把界面差分为行和列，我们正是需要这种布局，我们来实操一下。先给页面设置一个灰色的背景色