栅格布局：CSS网格布局是CSS中最强大的布局系统，因为它是二维系统，这意味着它可以同时处理列和行。
学习栅格布局，最重要的几个基础概念一定要清楚：单元格、栅格线、行、列、区域
一、声明容器
类似块级（block）容器，可以直接声明是栅格（grid），也可以声明（inline-grid）
二、划分行和列
使用 规则可划分列数，使用 划分行数。
划分行和列也可以采用百分比的形式
还可以使用比例划分
上面的代码中有些地方是可以简化的，比如行和列的设置
有些时候，会遇到这种情况，有三个单元格，第一个和第二个宽度（高度）确定，第三个自适应，这时候给这个设置auto属性
间距定义
栅格命名（不重要，这个比较麻烦，后面有简化写法）
栅格线可以使用命名与编号找到，方便控制指定栅格，或将内容添加到指定栅格中
命名可以独立命名也可以重复命名
独立命名
自动命名（针对重复设置的栅格系统会自动命名）
元素定位
1、根据栅格命名（就是上面的独立命名）
2、根据自动命名（就是上面的自动命名）
3、通过设置具体的第几条栅格线来设置区域位置
4、根据偏移量
简写模式
1、可以使用 设置行开始和结束栅格线，使用 设置列开始和结束栅格线。
2、更加简洁，同时对 与 属性的组合声明
如下所示
布局
语法结构
示例
占位符的使用
关于栅格对齐
栅格对齐属性
justify-content 属性的值如下
align-content 属性的值如下
元素对齐属性
justify-items 与 align-items 用于控制所有栅格内元素的对齐方式
justify-items 用于控制元素的水平对齐方式，可用的属性值如下
align-items 用于控制元素的垂直对齐方式，可用的属性值如下
示例
以上就是栅格布局的全部内容了，赶紧学起来吧！
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/5764.html