跳到主要内容

容器

2023年01月16日
柏拉文
越努力，越幸运

一、认识​

二、属性​

2.1 display​

display: grid指定一个容器采用网格布局

说明
  1. 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

语法

div {
  display: grid;
}

2.2 grid-template-rows​

容器指定了网格布局以后，接着就要划分行和列。grid-template-rows 属性定义每一行的行高

2.3 grid-template-columns​

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽

语法

  • 语法一、单个定义

    单个定义可以使用绝对单位，也可以使用百分比

    写法
    .container {
        display: grid;
        grid-template-rows: 100px 100px 100px;
        grid-template-columns: 100px 100px 100px;
    }
    实时编辑器
    function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

  const containerStyle = {
    width: '300px',
    height: '300px',
    backgroundColor: 'red',
    display: 'grid',
    gridTemplateRows: "33.3% 33.3% 33.3%",
    gridTemplateColumns: "33.3% 33.3% 33.3%",
  }

  return (
     <div style={containerStyle}>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
       <div style={{'backgroundColor': randomColor16()}}></div>
     </div>
  );
}
    结果
    Loading...

  • 语法二、重复定义repeat()

    repeat()可以简化重复的值。repeat() 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值

    • 写法一、重复值:

      .container {
          display: grid;
          grid-template-rows: repeat(3, 100px);
          grid-template-columns: repeat(3, 100px);
      }
      实时编辑器
      function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: 'repeat(3, 33.33%)',
        gridTemplateColumns: 'repeat(3, 33.33%)',
    }

    return (
        <div style={containerStyle}>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
      结果
      Loading...

    • 写法二、重复模式

      写法
      .container {
          display: grid;
          grid-template-columns: repeat(3, 33.33% 33.33% 33.33%);
          grid-template-columns: repeat(3, 33.33% 33.33% 33.33%);
      }
      实时编辑器
      function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: 'repeat(3, 33.33% 33.33% 33.33%)',
        gridTemplateColumns: 'repeat(3, 33.33%)',
    }

    return (
        <div style={containerStyle}>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
      结果
      Loading...

    • 写法三、自动填充

      写法
      .container {
          display: grid;
          grid-template-columns: repeat(auto-fill, 100px); // 表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
      }
      实时编辑器
      function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: 'repeat(3, 33.33% 33.33% 33.33%)',
        gridTemplateColumns: 'repeat(auto-fill, 33.33%)',
    }

    return (
        <div style={containerStyle}>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
      结果
      Loading...

  • 语法三、比例关系定义 fr

    fr 表示比例关系。如果两列的宽度分别为1fr和2fr,就是表示后者是前者的两倍

    • 写法一、只有比例关系

      写法
      .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
      }
      实时编辑器
      function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: 'repeat(3, 33.33% 33.33% 33.33%)',
        gridTemplateColumns: '1fr 1fr 1fr',
    }

    return (
        <div style={containerStyle}>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
      结果
      Loading...

    • 写法二、比例关系与绝对单位结合使用

      写法
      .container {
          display: grid;
          grid-template-columns: 150px 1fr 2fr;
      }
      实时编辑器
      function Test(props) {
  const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: 'repeat(3, 33.33% 33.33% 33.33%)',
        gridTemplateColumns: '33.33% 1fr 1fr',
    }

    return (
        <div style={containerStyle}>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
      结果
      Loading...

  • 语法四、范围关系定义minmax()

    minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

    写法
    grid-template-columns: 1fr 1fr minmax(100px, 1fr); // 表示列宽不小于100px，不大于1fr

  • 语法五、自适应定义auto

    auto关键字表示由浏览器自己决定长度

    写法
    grid-template-columns: 100px auto 100px;

  • 语法六、定义网格线名称

    grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用

    语法
    .container {
        display: grid;
        grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
        grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
    }

应用场景

  • 应用场景一、两栏布局

    场景背景: 实现一个左宽为200px, 右宽自适应的两栏布局

    场景解决: 通过 grid-template-columns: 200px auto 实现

    实时编辑器
    function Test(props) {
    const containerStyle = {
        width: '100%',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateColumns: '200px auto',
    }
    const leftStyle = {
        backgroundColor: "yellow"
    }
    const rightStyle = {
        backgroundColor: "blue"
    }

    return (
        <div style={ containerStyle }>
            <div style={ leftStyle }></div>
            <div style={ rightStyle }></div>
        </div>
    );
}
    结果
    Loading...

  • 应用场景二、三栏布局

    场景背景: 实现一个左宽为200px, 右宽为200px, 中间自适应的三栏布局

    场景解决: 通过 grid-template-columns: 200px auto 200px 实现

    实时编辑器
    function Test(props) {
    const containerStyle = {
        width: '100%',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateColumns: '200px auto 200px',
    }
    const leftStyle = {
        backgroundColor: "yellow"
    }
    const centerStyle = {
        backgroundColor: "green"
    }
    const rightStyle = {
        backgroundColor: "blue"
    }

    return (
        <div style={ containerStyle }>
            <div style={ leftStyle }></div>
            <div style={ centerStyle }></div>
            <div style={ rightStyle }></div>
        </div>
    );
}
    结果
    Loading...

  • 应用场景三、两栏布局（上下）

    场景背景: 实现一个左宽为200px, 右宽自适应的两栏布局

    场景解决: 通过 grid-template-columns: 200px auto 实现

    实时编辑器
    function Test(props) {
    const containerStyle = {
        width: '100%',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: '200px auto',
    }
    const leftStyle = {
        backgroundColor: "yellow"
    }
    const rightStyle = {
        backgroundColor: "blue"
    }

    return (
        <div style={ containerStyle }>
            <div style={ leftStyle }></div>
            <div style={ rightStyle }></div>
        </div>
    );
}
    结果
    Loading...

  • 应用场景四、三栏布局（上下）

    场景背景: 实现一个左宽为200px, 右宽为200px, 中间自适应的三栏布局

    场景解决: 通过 grid-template-columns: 200px auto 200px 实现

    实时编辑器
    function Test(props) {
    const containerStyle = {
        width: '100%',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: '100px auto 100px',
    }
    const leftStyle = {
        backgroundColor: "yellow"
    }
    const centerStyle = {
        backgroundColor: "green"
    }
    const rightStyle = {
        backgroundColor: "blue"
    }

    return (
        <div style={ containerStyle }>
            <div style={ leftStyle }></div>
            <div style={ centerStyle }></div>
            <div style={ rightStyle }></div>
        </div>
    );
}
    结果
    Loading...

  • 应用场景五、实现九宫格布局

    场景背景: 实现九宫格布局

    场景解决:

    • 方式一、grid-template-columns: repeat(3,1fr)实现

      实时编辑器
      function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: 'repeat(3, 1fr)',
        gridTemplateColumns: 'repeat(3, 1fr)',
    }

    return (
        <div style={containerStyle}>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
      结果
      Loading...

    • 方式二、grid-template-columns: repeat(3,33.33%)实现

      实时编辑器
      function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: 'repeat(3, 33.33%)',
        gridTemplateColumns: 'repeat(3, 33.33%)',
    }

    return (
        <div style={containerStyle}>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
      结果
      Loading...

  • 应用场景六、实现十二网格布局

    场景背景: 实现十二栅格布局

    场景解决: 通过 grid-template-columns: repeat(3, 33.33%) 实现

    实时编辑器
    function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateColumns: 'repeat(12, 1fr)',
    }

    return (
        <div style={containerStyle}>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
    结果
    Loading...

2.4 row-gap​

row-gap 属性设置行与行的间隔（行间距）

2.5 column-gap​

column-gap 属性设置列与列的间隔（列间距）

语法

column-gap: 24px;
实时编辑器
function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        columnGap: '24px',
        rowGap: "24px",
        gridTemplateRows: 'repeat(3, 1fr)',
        gridTemplateColumns: 'repeat(3, 1fr)',
    }

    return (
        <div style={containerStyle}>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
结果
Loading...

2.6 gap​

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

语法

  • 语法一、两个值都写
gap: <row-gap> <column-gap>;
实时编辑器
function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gap: "24px 24px",
        gridTemplateRows: 'repeat(3, 1fr)',
        gridTemplateColumns: 'repeat(3, 1fr)',
    }

    return (
        <div style={containerStyle}>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
结果
Loading...
  • 语法二、省略第二个值
gap: <row-gap>; // 如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。
实时编辑器
function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gap: "24px",
        gridTemplateRows: 'repeat(3, 1fr)',
        gridTemplateColumns: 'repeat(3, 1fr)',
    }

    return (
        <div style={containerStyle}>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
            <div style={{'backgroundColor': randomColor16()}}></div>
        </div>
    );
}
结果
Loading...

2.7 grid-template-areas​

2.8 grid-auto-flow​

grid-auto-flow 属性决定了容器内的子元素排列顺序的机制

语法

grid-auto-flow: column;

可选值

  • row: 先行后列

  • column: 先列后行

  • row dense:

  • column dense:

2.9 justify-items​

justify-items属性设置单元格内容的水平位置（左中右）

语法:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

可选值:

  • start: 对齐单元格的起始边缘

  • end: 对齐单元格的结束边缘

  • center: 单元格内部居中

  • stretch: 拉伸，占满单元格的整个宽度（默认值）

2.10 align-items​

align-items属性设置单元格内容的垂直位置（上中下）

语法:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

可选值:

  • start: 对齐单元格的起始边缘

  • end: 对齐单元格的结束边缘

  • center: 单元格内部居中

  • stretch: 拉伸，占满单元格的整个宽度（默认值）

2.11 place-items​

place-items属性是align-items属性和justify-items属性的合并简写形式

语法:

  • 写法一、两个值都写

    place-items: <align-items> <justify-items>;

  • 写法二、省略第二个值

     place-items: <align-items>; // 如果省略第二个值，则浏览器认为与第一个值相等

2.12 justify-content​

justify-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;  
}

可选值:

  • start: 对齐容器的起始边框

  • end: 对齐容器的结束边框

  • center: 容器内部居中

  • stretch: 项目大小没有指定时，拉伸占据整个网格容器

  • space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

  • space-between: 项目与项目的间隔相等，项目与容器边框之间没有间隔

  • space-evenly: 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

2.13 align-content​

align-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;  
}

可选值:

  • start: 对齐容器的起始边框

  • end: 对齐容器的结束边框

  • center: 容器内部居中

  • stretch: 项目大小没有指定时，拉伸占据整个网格容器

  • space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

  • space-between: 项目与项目的间隔相等，项目与容器边框之间没有间隔

  • space-evenly: 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

2.14 place-content​

place-content属性是align-content属性和justify-content属性的合并简写形式

语法:

  • 写法一、两个值都写

    place-content: <align-content> <justify-content>

  • 写法二、省略第二个值

    place-content: <align-content> // 如果省略第二个值，则浏览器认为与第一个值相等

2.15 grid-auto-columns​

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

2.16 grid-auto-rows​

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