css

grid布局语法参考

将网页划分成一个个网格，可以任意组合不同的网格

grid布局语法参考

grid布局是将网页划分成一个个网格，并将其任意组合的布局方法。类似于以前的table布局。

  • 和flex布局的区别：flex是围绕轴线进行的一系列布局方法；而grid是将容器划分为行和列进行布局，其灵活性更高。
  • 兼容性：有较大兼容性问题，参考caniuse-grid

容器属性

布局属性：

  1. display: grid; 块级元素
  2. display: inline-grid; 行内块元素

设置属性：

  1. grid-template-columns

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    /* 把容器分为宽度为100px的三列 */
    grid-template-columns: 100px 100px 100px;

    /* 把容器等分为三列 */
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-columns: repeat(3, 33.33%);

    /* 把容器分为100px 20px 80px 100px 20px 80px的六列 */
    grid-template-columns: repeat(2, 100px 20px 80px);

    /* 用100px分列，直到将容器宽度撑满 */
    grid-template-columns: repeat(auto-fill, 100px);

    /* 容器第一列为150px，剩下的宽度以1：2均分(fr:fraction) */
    grid-template-columns: 150px 1fr 2fr;

    /* 容器第三列最小宽为100px，最大为一个片段长度 */
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);

    /* 容器一三列为100px，中间自行撑开或撑满 */
    grid-template-columns: 100px auto 100px;

    /* 将网格线命名为c1、c2、c3、c4或lala，可对同一根网格线命名为多个名字 */
    grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4 lala];

  2. grid-template-rows:; => 语法和 grid-template-columns 相同，对容器分行；

  3. column-gap: 20px; => 给每列之间设置20px的间距 （row-gap: ; 用法相同）；

  4. gap: <row-gap> <column-gap>; => 将column-gap和row-gap 合写。如果省略了第二个值，那么默认第二个值和第一个相同；

    使用gap的时候会把gap的厚度加入到grid的宽高中，超过100%会导致溢出问题，可使用fr变通

  5. grid-template-areas

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 给区域命名 */
    grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';

    /* 用. 代替不用的区域 */
    grid-template-areas: 'a . c'
                         'd . f'
                         'g . i';

    注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

  6. grid-auto-flow: column; => 将先行后列的排列顺序改为先列后行的顺序

  7. grid-auto-flow: row dense; => 先行后列，并且尽可能紧密填满，尽量不出现空格。

  8. justify-items、align-items、place-items

    1
    2
    3
    4
    5
    6
    7
    8
    /* justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下） */
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;

    /* place-items属性是align-items属性和justify-items属性的合并简写形式。省略第二个值，浏览器默认与第一个值相等。*/
    place-items: <align-items> <justify-items>;


  9. justify-content、align-content、place-content

    1
    2
    3
    4
    5
    6
    /* justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。*/
    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属性是align-content属性和justify-content属性的合并简写形式。省略第二个值，浏览器默认与第一个值相等。*/
    place-content: <align-content> <justify-content>;

  10. grid-auto-rows

    1
    2
    /* grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。*/
    grid-auto-rows: 50px;

项目属性

  1. grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* 值可以是数字、网格线名字、跨行跨列span(end不会覆盖start) */
    /* 指定项目左边框所在的垂直网格线在第一条网格线上 */
    grid-column-start: 1 | c1-start | span 2;

    /* 指定项目右边框所在的垂直网格线在第三条网格线上 */
    grid-column-end: 3 | c2-end | span 2;

    /* 指定项目上边框所在的水平网格线在第一条网格线上 */
    grid-row-start: 1 | r1-start | span 2;

    /* 指定项目下边框所在的水平网格线在第三条网格线上 */
    grid-row-end: 3 | r2-end | span 2;

    /* grid-column属性是grid-column-start和grid-column-end的合写形式，grid-row属性是grid-row-start属性和grid-row-end的合写形式。*/
    /* 上面的代码可以合写为下面的 */
    grid-column: 1 / 3;
    grid-row: 1 / span 2;

  2. grid-area: d => 指定项目放在哪一个区域。

  3. justify-self、align-self、place-self

    1
    2
    3
    4
    5
    6
    7
    8
    /* justify-self属性设置项目内内容的水平位置（左中右），跟justify-items属性的用法完全一致。*/
    justify-self: start | end | center | stretch;

    /* align-self属性设置项目内内容的垂直位置（上中下），跟align-items属性的用法完全一致。*/
    align-self: start | end | center | stretch;

    /* place-self属性是align-self属性和justify-self属性的合写形式。省略第二个值，浏览器默认认为这两个值相等。 */
    place-self: <align-self> <justify-self>;

用法参考：grid布局