grid布局小结

上一篇我们详细介绍了grid布局，这一篇我们总结一下，方便查询：

定义grid容器的方式：

display: grid;
或者
display：inline-grid;//行内块元素

容器属性：

grid-template-columns：定义列宽

grid-template-rows：定义行高

grid-auto-columns：在网格外自动添加的单元格 列宽 ，和 定义列宽 写法一样 没举例
grid-auto-rows ：早网格外自动添加的单元格 行高, 和 定义行高 写法一样  没举例

举例：

        .container{
            /* px */
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            /* 百分比 */
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 33.33% 33.33% 33.33%;
            /* repeat关键字 重复*/
            grid-template-columns: repeat(3, 33.33%);
            grid-template-rows: repeat(3, 33.33%);
            /* repeat关键字 重复模式 */
            grid-template-columns: repeat(2, 100px 20px 80px);
            /* auto-fill   单元格大小固定容器大小不固定时  自动填充满 */
            grid-template-columns: repeat(auto-fill, 100px);
            /* fr关键字   */
            grid-template-columns: 1fr 2fr;/* 后者是前者的二倍 */
            grid-template-columns: 60px 1fr 60px;/* 两边固定中间沾满 */
            /* minmax(最小宽度,最大宽度) */
            grid-template-columns: 1fr 1fr minmax(100px, 1fr);
            /* auto 由浏览器自身决定长度 */
            grid-template-columns: 100px auto 100px;
            /* 定义网格线名称 */
            grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
            grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
        }

grid-row-gap：单元格行间距

grid-column-gap：单元格列间距

grid-gap：简写形式； 行间距 列间距

举例：

.container{
            grid-row-gap: 10px;
            grid-column-gap: 20px;
            /* 简写 */
            grid-gap:10px 20px;
        }

grid-template-areas：指定单元格区域名称；

举例：

.container{
            grid-template-areas: 'a b c'
                                 'd e f'
                                 'g h i';
            /* 一个区域可以由多个单元格组成 */
            grid-template-areas: 'a a a'
                                 'b b b'
                                 'c c c';
            /* 某些区域不需要利用 用 . 标识即可 */
            grid-template-areas: 'a . c'
                                 'd . f'
                                 'g . i';
        }

grid-auto-flow：决定先行后列、还是先列后行

举例：

.container{
            grid-auto-flow:row;/*默认值  先行后列*/
            grid-auto-flow:row dense;/*某些项目指定位置后 空白位置 按照  先行后列填充*/
            grid-auto-flow:column;/*先列后行*/
            grid-auto-flow:column dense;/*某些项目指定位置后 空白位置 按照  先列后行填充*/
        }

justify-items :，设置单元格内容的水平位置（左中右）
align-items :，设置单元格内容的垂直位置（上中下）
place-items :，是align-items属性和justify-items属性的合并简写形式。

.container{
            justify-items: start | end | center | stretch;
            align-items: start | end | center | stretch;
            /* 简写 */
            /* place-items: 单元格内垂直对齐方式 单元格内水平对齐方式; */
            place-items: start start;
        }

justify-content :container内整个内容区域的水平位置（上中下）默认为stretch     类似于flex布局中的justify-content，

align-content :，container内整个内容区域的垂直位置（上中下）   默认为stretch     类似于flex布局中的align-items，

place-content :简写方式：垂直属性 水平属性

.container{
            justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
            align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
             /*简写  */
             /* place-content: 垂直对齐方式 水平对齐方式 */
             place-content: space-around space-evenly;
        }

grid-template 属性，合并写法不建议使用
grid 属性,合并写法不建议使用

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。

项目属性：

指定项目位置

网格线在没定义的情况下 从左到右 从1开始递增   从上到下 从1开始递增

grid-column-start ：，指定项目的左边框线在哪个网格线上，或者是跨越情况（span number）
grid-column-end ：，指定项目的有边框线在哪个网格线上，或者是跨越情况（span number）
grid-row-start ：，指定项目的上边框线在哪个网格线上，或者是跨越情况 （span number）
grid-row-end ：，指定项目的下边框线在哪个网格线上，或者是跨越情况 （span number）

简写

grid-column 属性，grid-column属性是grid-column-start和grid-column-end的合并简写形式，
grid-row 属性，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

举例：

.item{
            /* 指定 左 右 上  下  边框线在哪条网格线上 */
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end:4;
            /* span 2  表示跨越 2个单元格 */
            grid-column-start:span 2;
            /* 简写 */
            grid-column: 1 / 3;
            grid-row: 2 / 4;
            /* 简写的 跨越写法  */
            grid-column:1 / span 2;
            grid-row:2 / span 2;
        }

grid-area ：指定项目所在的区域

.item{
            /* 直接指定区域名称 */
            grid-area: i;
            /* grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。 */
            /* 上 / 左 / 下 / 右 */
             /* 空格不是必须的 */
             grid-area: 3 / 3 / 4 / 4;
        }

justify-self ：设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，也是只作用于单个项目。 默认值是stretch
align-self ：设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。默认值是stretch
place-self ：上面两个属性的缩写；place-self: <align-self> <justify-self>;   垂直 水平

.item{
            justify-self: start | end | center | stretch;
            align-self: start | end | center | stretch;
            /* 简写 */
            place-self:center center;
        }

。