更新于 

grid布局

参考博客：阮一峰的网络日志

基本概念

flex和grid的区别
  • flex：轴线布局/一维布局
  • grid：行列布局/二维布局
容器&&项目
  • 容器：被划分成网格的根元素
  • 项目：被布局的子元素
基本属性

grid的开启：

1
2
display: grid;
display: inline-grid;

行列宽高的指定：

1
2
3
4
/*指定列宽 */
grid-template-columns: 50px 50px 50px; 
/*指定行高 */
grid-template-rows: 50px 50px 50px;
repeat函数

使用repeat，类似于for循环快速指定宽度模式。
repeat有2个参数：

  • 参数1：重复次数
    • 可以是auto-fill
  • 参数2：重复值
    • 可以是多个值
1
2
grid-template-columns: repeat(3, 33.33%);
grid-template-rows:  repeat(3, 33.33%);

repeat的第2个参数也可以是多个值：

1
grid-template-columns: repeat(3, 100px 20px 80px);

repeat第1个参数可以使用自适应关键字auto-fill

1
grid-template-columns: repeat(auto-fill, 100px);
fr单位

fr关键字
类似于flex或者span，将宽度进行等分
也可以和绝对单位混合使用

1
2
grid-template-columns: 1fr 1fr 1fr; 
grid-template-columns: 150px 1fr 2fr;
minmax函数

生成一个长度范围

1
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
auto关键字

auto关键字，表示自适应尺寸

1
grid-template-columns: 100px auto 100px;
网格线名称

使用方括号指定网格线名称，
一根线可以有多个名称：

1
2
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1 row1] 100px [r2] 100px [r3] auto [r4];

容器属性

网格容器
gap 间距
1
2
3
4
5
6
7
8
/* 
    row-gap 行间距
    column-gap 列间距
    gap: <grid-row-gap> <grid-column-gap>
*/
row-gap:10px;
column-gap: 10px;
gap:10px;
area

grid-template-areas属性用于划分区域，
区域的命名会影响到网格线的命名，
网格线自动以，区域名-start/end命名

1
2
3
4
5
6
7
.grid-root{
  /* ... */
  display: grid;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i'; 
}

子组件中需要使用grid-area属性标明所属区域：

1
2
3
.grid-item-1{
  grid-area:a;
}
grid-auto-flow

划分好网格之后，需要将网格容器之下的项目依次填入，
填入的顺序由grid-auto-flow控制：

1
2
3
4
/* 先行后列 */
grid-auto-flow: row; 
/* 先列后行 */
grid-auto-flow: column;
控制项目的属性
项目布局

justify/align/place-items用于控制项目在网格中的布局

1
2
3
4
5
6
7
/* 
    justify-items 网格内物体的横向布局
    align-items 网格内物体的纵向布局
    place-items: <align-items> <justify-items>
*/
justify-items: stretch; 
place-items:center start;

justify/align/place-content用于控制网格的行列相对于容器的布局

1
2
3
4
5
6
7
/* 
        justify-content  横向分列的布局
        align-content 纵向分行的布局
        place-content:<align-contents> <justify-contents>
*/
justify-content: space-around;
align-content: center;
grid-auto-columns/rows

当给项目指定的行列超出在容器中，使用grid-template-columns/rows/areas创建的行列数时，
浏览器会自动创建多余的网格，
使用grid-auto-columns/rows控制自动创建的行列的尺寸

1
2
3
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-auto-rows: 50px;

项目属性

项目属性
指定位置

通过下面的属性，可以在容器网格中指定项目的位置：

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
1
2
3
4
5
6
.grid-item{
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start:1;
  grid-row-end:3;
}

除了通过索引指定外，
也可以直接指定栅格线的名称：

1
2
3
4
5
6
7
8
9
.grid-box{
  display: grid;
  grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr [c4];
  grid-template-rows: [r1] 1fr [r2] 1fr [r3] 1fr [r4];
}
.grid-item-1{
  grid-column-start:c2;
  grid-column-end: c4;
}

span关键字可以用来表示跨越的网格数，
使用span时，grid-column-start/end所表示的意思完全一致

1
2
3
.grid-item-2{
  grid-column-start: span 3;
}

可以直接通过合并的方式简写row和column的范围：

1
2
3
4
5
6
7
8
9
10
11
.grid-item-4{
    /* 
        grid-column: <start-line> / <end-line>
        grid-row: <start-line> / <end-line>
    */
    grid-column: 1 / 3;

    /* 也可以直接加入span关键字 */
    grid-row: 4 / span 2;
    background:pink
}

还可以直接使用area简写行列：

1
2
3
4
5
6
.grid-item-3{
    /* 
        grid-area: <row-start> / <column-start> / <row-end> / <column-end>
    */
    grid-area: 6 / 2 / 7 / 3;
}
justify-self和justify-item的区别

2者的使用效果非常相似，不同点在于：

  • justify-self
    • 由项目控制自身的布局
  • justify-item
    • 由容器控制所有项目的布局