css:Grid网格布局学习笔记

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 Grid 布局远比 Flex 布局强大。

.grid {
    /* 块级元素 */
    display: grid;
}

容器属性

1、划分行和列

指定列宽 grid-template-columns 
指定行高 grid-template-rows 

允许的值：
100px 100px 100px;
33.33% 33.33% 33.33%;
repeat(3, 33.33%); （重复的次数， 重复值）
repeat(auto-fill, 100px); 自动填充
1fr 2fr; 比例关系
150px 1fr 2fr;
1fr 1fr minmax(100px, 1fr); 长度范围
100px auto 100px; 由浏览器自己决定长度
[c1] 100px [c2] 100px [c3] auto [c4]; 网格线的名称

2、行列间距

行间距 grid-row-gap (row-gap)
列间距 grid-column-gap (column-gap)
grid-gap (gap):  ;

3、指定"区域"

grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';

4、放置顺序

grid-auto-flow
row 先行后列 (默认)
column 先列后行

5、单元格对齐

水平位置 justify-items: 
start | end | center | stretch(default);
垂直位置 align-items: 
start | end | center | stretch(default);

place-items:  ;

6、内容对齐

水平位置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:  

7、多余网格的列宽和行高

grid-auto-columns
grid-auto-rows
写法与grid-template-columns和grid-template-rows完全相同

8、合并简写

grid-template:   
grid:      

易读易写的角度考虑，还是建议不要合并属性

项目属性

1、网格线定位

grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row-start：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

允许值：
指定为网格线的序号 1
指定为网格线的名字 header-start
跨越网格 span 2;

grid-column:  / 
grid-row:  / 

2、指定项目区域

grid-area

允许值
区域名： e
指定项目的位置： /  /  / ;

3、单元格内容对齐

水平位置 justify-self（左中右），与justify-items一致
垂直位置 align-self（上中下），与align-items一致

place-self:  ;

布局实例

    .grid {
        /* 块级元素 */
        display: grid;

        /* 指定列宽  */
        grid-template-columns: 1fr 1fr 1fr;
        /* 指定行高 */
        grid-template-rows: repeat(3, 100px);

        /* 指定行列间距 */
        row-gap: 10px;
        column-gap: 10px;

        /* 放置顺序 */
        grid-auto-flow: row;

        /* 单元格对齐 */
        justify-items: stretch;
    }

    .column {
        background-color: #EEEEEE;
        text-align: center;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9

效果

参考 CSS Grid 网格布局教程