一、理解 grid
二、理解 css grid 布局
CSS Grid布局是一个二维的布局系统，它允许我们通过定义网格和网格中每个元素的位置和尺寸来进行页面布局。CSS Grid是一个非常强大的布局系统，它不仅可以用于构建网格布局，还可以用于定位元素，并且可以很好地处理复杂的布局。
CSS Grid布局由两个主要的组成部分组成：容器和项目。容器是我们要定义网格的元素，它的display属性必须设置为grid或inline-grid。而项目是容器内的元素，它们被放置在网格中，并占据一个或多个网格单元。
要创建一个网格布局，我们需要先定义一个网格容器，然后使用grid-template-columns和grid-template-rows属性定义行和列的大小和数量。我们还可以使用grid-column和grid-row属性来控制每个项目在网格中的位置。
除了基本的网格布局，CSS Grid还提供了许多其他的布局特性，如重叠元素、自适应大小、对齐和间距等。这使得我们能够使用CSS Grid来创建各种各样的布局，从简单的网格到复杂的响应式布局，以满足不同的设计需求。
CSS Grid布局是一个灵活、强大和易于使用的布局系统，它提供了许多功能来帮助我们创建各种各样的布局。它已经受到了广泛的支持，并且越来越受到前端开发人员的重视。
三、grid布局有哪些核心概念
四、浏览器兼容性
不考虑老旧的浏览器已经是可以使用了。
旧版浏览器可能需要添加一些前缀才能支持CSS Grid布局，而新版浏览器已经不需要前缀了。在编写CSS Grid布局时，建议用适当的前缀完成兼容性工作，现在css工具也可以自动添加。
如果您的站点需要支持较老版本的浏览器，可以使用其他CSS布局方式来弥补CSS Grid布局的缺陷。例如，可以使用Flexbox布局或传统的基于表格的布局来实现相应的设计效果。
五、当设置了 grid 布局后，哪些属性将失效
六、grid 常用属性
七、DEMO
布局：大屏方案（grid）_大屏布局方案_snow@li的博客-CSDN博客
八、欢迎交流指正
参考链接
css3-flex布局：基础使用 / Flexbox布局_snow@li的博客-CSDN博客
