项目

2023年01月16日

柏拉文

越努力，越幸运

一、认识

二、属性

2.1 grid-column-start

grid-column-start表示指定左边框所在的垂直网格线, 除了指定的项目以外，其他项目都没有指定位置，由浏览器自动布局。布局顺序由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会先行后列进行排列。读者可以把这个属性的值分别改成column、row dense和column dense

语法

.item-1 {
  grid-column-start: 2; // item-1 项目的左边框是第二根垂直网格线
  grid-column-end: 4; // item-1 项目的右边是第四根垂直网格线
}

实时编辑器

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)",
  }
  const item1Style = {
    gridColumnStart: 2,
    gridColumnEnd: 4,
  }

  return (
     <div style={containerStyle}>
       <div style={{...item1Style, '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>
  );
}

结果

2.2 grid-column-end

grid-column-end表示指定右边框所在的垂直网格线, 除了指定的项目以外，其他项目都没有指定位置，由浏览器自动布局。布局顺序由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会先行后列进行排列。读者可以把这个属性的值分别改成column、row dense和column dense

语法

.item-1 {
  grid-column-start: 2; // item-1 项目的左边框是第二根垂直网格线
  grid-column-end: 4; // item-1 项目的右边是第四根垂直网格线
}

实时编辑器

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)",
  }
  const item1Style = {
    gridColumnStart: 2,
    gridColumnEnd: 4,
  }

  return (
     <div style={containerStyle}>
       <div style={{...item1Style, '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>
  );
}

结果

2.3 grid-row-start

grid-row-start 表示指定上边框所在的水平网格线

语法

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

实时编辑器

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)",
  }
  const item1Style = {
    gridColumnStart: 2,
    gridColumnEnd: 4,
    gridRowStart: 2,
    gridRowEnd: 4
  }

  return (
     <div style={containerStyle}>
       <div style={{...item1Style, '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>
  );
}

结果

2.4 grid-row-end

grid-row-end 表示指定下边框所在的水平网格线

语法

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

实时编辑器

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)",
  }
  const item1Style = {
    gridColumnStart: 2,
    gridColumnEnd: 4,
    gridRowStart: 2,
    gridRowEnd: 4
  }

  return (
     <div style={containerStyle}>
       <div style={{...item1Style, '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>
  );
}

结果

2.5 grid-column

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

语法:

写法一、通过具体数值

.item {
    grid-column: <start-line> / <end-line>;
    grid-row: <start-line> / <end-line>;
}

实时编辑器

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)",
    }
    const item1Style = {
        gridColumn: '2/4',
        gridRow: '2/4'
    }

    return (
        <div style={containerStyle}>
        <div style={{...item1Style, '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>
    );
}

结果

写法二、通过关键字+数字

.item {
    grid-column: <start-line> / span 跨越 n 个网格;
    grid-row: <start-line> / span 跨域 n 个网格;
}

实时编辑器

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)",
    }
    const item1Style = {
        gridColumn: '2 / span 2',
        gridRow: '2 / span 2'
    }

    return (
        <div style={containerStyle}>
        <div style={{...item1Style, '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>
    );
}

结果

2.6 grid-row

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

语法

写法一、通过具体数值

.item {
    grid-column: <start-line> / <end-line>;
    grid-row: <start-line> / <end-line>;
}

实时编辑器

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)",
    }
    const item1Style = {
        gridColumn: '2/4',
        gridRow: '2/4'
    }

    return (
        <div style={containerStyle}>
        <div style={{...item1Style, '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>
    );
}

结果

写法二、通过关键字+数字

.item {
    grid-column: <start-line> / span 跨越 n 个网格;
    grid-row: <start-line> / span 跨域 n 个网格;
}

实时编辑器

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)",
    }
    const item1Style = {
        gridColumn: '2 / span 2',
        gridRow: '2 / span 2'
    }

    return (
        <div style={containerStyle}>
        <div style={{...item1Style, '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>
    );
}

结果

2.7 grid-area

grid-area属性指定项目放在哪一个区域

语法

写法一、直接指定

直接指定放置在哪一个区域
```
.item-1 {
    grid-area: e;
}
```
写法二、合并简写

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
```
.item {
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
```

2.8 justify-self

justify-self属性设置单元格内容的水平位置（左中右）,跟justify-items属性的用法完全一致，但只作用于单个项目

语法:

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

可选值:

start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）

2.9 align-self

align-self属性设置单元格内容的垂直位置（上中下）,跟align-items属性的用法完全一致，也是只作用于单个项目

语法:

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

可选值:

start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）

2.10 place-self

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

语法:

写法一、两个值都写

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

写法二、省略第二个值

place-self: <align-self> <justify-self>; // 如果省略第二个值，place-self属性会认为这两个值相等

一、认识​

二、属性​

2.1 grid-column-start​

2.2 grid-column-end​

2.3 grid-row-start​

2.4 grid-row-end​

2.5 grid-column​

2.6 grid-row​

2.7 grid-area​

2.8 justify-self​

2.9 align-self​

2.10 place-self​

一、认识

二、属性

2.1 grid-column-start

2.2 grid-column-end

2.3 grid-row-start

2.4 grid-row-end

2.5 grid-column

2.6 grid-row

2.7 grid-area

2.8 justify-self

2.9 align-self

2.10 place-self