grid-template-area
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成，用于定义网格区域名称。
以上代码定义了 3*3的九宫格，每个单元格的区域名称分别是a~i。
grid-area （项目属性）
grid-area是项目属性，指定项目放在哪一个区域。一般搭配grid-template-area使用。
示例一： 基于上述的3*3的网格，需求是把item1放到中的单元格。
中间区域的单元格名称是e，直接指定项目item1的grid-area属性值为e即可。
还可以通过项目指定区域，合并单元格。
示例二：3*3单元格，5个项目元素，第一行和第二行的单元格分别合并。
上述代码表示有3*3九宫格，其中第一行和第二行分别指定同一个区域。
上述代码表示将Itme1放到区域为a的位置，即占满第一行。将Itme2放到区域为b的位置，即占满第二行。
示例三：练习一个常见的布局
通过名称就知道有4个项目元素，再指定各个项目所在网格位置：
注意：所有指定项目区域或其他方式来合并单元格，只能合并矩形，L型或其他形状均无效。
- ：列与列的间隔（列间距）。
- ：行与行的间隔（行间距）
- 属性是和的合并简写形式。如设置一个值则 列间距 = 行间距。
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。就是定义单元格排列顺序和排列方式。
row、column
默认值，即放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。如下图示
这个顺序由属性决定，默认值是，即"先行后列"。也可以将它设成，变成"先列后行"。
row dense、column dense
上述代码就是将和占据2个单元格。在默认的情况下，产生下面这样的布局：
图示中，item1后是空白，因为itme2的水平网格线从1开始到3结束，即占了2个单元格， 而itme3排序默认在itme2后面。
现将grid-auto-flow: row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。效果如下图示：
属性设置单元格内容的水平位置（左中右），属性设置单元格内容的垂直位置（上中下）
justify-items
align-items
place-items
属性是属性和属性的合并简写形式。
如果省略第二个值，则浏览器认为与第一个值相等。
容器只有一个元素下，居中样式又有一种写法了：
属性是整个内容区域在容器里面的水平位置（左中右及空白分配），属性是整个内容区域的垂直位置（上中下及空白分配）。其效果跟布局一样。
justify-content
align-content
place-content
属性是属性和属性的合并简写形式。
如果省略第二个值，浏览器就会假定第二个值等于第一个值。
同样的，若容器只有一个元素下，居中样式也可以这样：
简单来说，定义容器中多余网格的列宽、行高。比如，网格设置了2行3列，但项目元素一共有8个，如下：
也或者，改变item7和item8的水平网格线的起始位置来改变其位置
上面2个例子都能看到在超出设置的网格后，单元格变得奇怪了，行高不受控制了。这时候就可以设置属性来固定行高：
属性和属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与和完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
该属性是 这三个属性的简写形式。
该属性是 这六个属性的简写形式。
项目的位置是可以指定的，除了使用上述说明过的和搭配使用来指定，也可以指定项目的四个边框，分别定位在哪根网格线来指定项目的位置和占用的单元格。
- ：定义项目左边框所对齐的垂直网格线
- ：定义项目右边框所对齐的垂直网格线。
- ：是和的简写形式
- ：定义项目上边框所对齐的水平网格线。
- ：定义项目下边框所对齐的水平网格线。
- ：是和grid-row-end的简写形式
示例一：基于九宫格改造：
上述代码表示：简单来说，将的从第2根垂直网格线开始，到第2根垂直网格线结束，效果就是右移一个单元格，且占用2个单元格；将的从第1根水平网格线开始，到第4根水平网格线结束，效果就是上移一个单元格，且占用3个单元格。
示例二：常见的布局
示例二：存在空格情况
上述将Item1右移一个单元格，且占用2个单元格。
上图中，只指定了的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
除了以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的属性决定，这个属性的默认值是，因此会"先行后列"进行排列。我们可以通过设置这个属性的值为或来改变布局。
比如设置 ，尽可能填满。效果如下：
span 关键字
这四个属性的值还可以使用关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
示例：布局
justify-self、align-self、place-self
- ：定义项目在单元格区域内的水平位置（左中右）
- ：定义项目在单元格区域内的垂直位置（上中下）
- ：同时定义项目在单元格区域内的水平和垂直位置，是 的简写。若省略第二个值，默认两个值相等。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
justify-self
定义单个项目在单元格内的水平位置（左中右）
align-self
定义单个项目在单元格内的垂直位置（上中下）
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/21846.html