跳到主要内容

场景

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

场景一、两栏布局​

场景背景: 实现一个左宽为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...

场景三、多列布局​

场景背景: 需要有多列,并且有固定间距

场景解决: 通过 Flex 划分每一行的元素排列, 通过 Grid 中的 gap 属性规定间距

场景实现

实时编辑器
function Test(props) {
  const container = {
    width: "400px",
    display: "grid",
    gap: "24px 24px",
    backgroundColor: "red",
    gridTemplateColumns: "repeat(4, 1fr)",
  }
  const item = {
    height: "100px",
    backgroundColor: "yellow"
  }
  return (
     <div style={ container }>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></div>
          <div style={ item }></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...

场景六、水平居中布局​

场景背景: 通过 grid 实现水平居中布局

场景解决: 通过 justify-items: center; 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        justifyItems: "center",
    }
    const itemStyle = {
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目不需要指定宽高，可以根据内容自适应居中

场景七、垂直居中布局​

场景背景: 通过 grid 实现垂直居中布局

场景解决: 通过 align-items: center 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        alignItems: "center"
    }
    const itemStyle = {
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</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 实现水平垂直居中布局

场景解决: 通过 justify-items: center; align-items: center 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        justifyItems: "center",
        alignItems: "center"
    }
    const itemStyle = {
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目不需要指定宽高，可以根据内容自适应居中