九宫格

一、Flex 布局

---

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

场景解决: 通过 display: flex; 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: 'flex',
        gap: "24px",
        flexWrap: "wrap",
    }
    const itemStyle = {
        flex: "auto",
        width: "80px",
        height: "80px",
        backgroundColor: randomColor16(),
    }

    return (
        <div style={containerStyle}>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
        </div>
    );
}

结果

Loading...

二、Grid 布局

---

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

场景解决:

• 方式一、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...

三、Table 布局

---

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

场景解决: 通过 display: flex; 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 table = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'table',
        borderSpacing: "4px",
    }
    const row = {
        display: "table-row"
    }
    const column = {
        width: "100px",
        height: "100px",
        display: "table-cell",
        backgroundColor: randomColor16(),
    }

    return (
        <div style={ table }>
            <div style={ row }>
                <div style={ column }></div>
                <div style={ column }></div>
                <div style={ column }></div>
            </div>
            <div style={ row }>
                <div style={ column }></div>
                <div style={ column }></div>
                <div style={ column }></div>
            </div>
            <div style={ row }>
                <div style={ column }></div>
                <div style={ column }></div>
                <div style={ column }></div>
            </div>
        </div>
    );
}

结果

Loading...

四、Column 布局

---

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

场景解决: 通过 display: flex; 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',
        columns: "3 4px"
    }
    const itemStyle = {
        height: "84px",
        marginBottom: "4px",
        backgroundColor: randomColor16(),
    }

    return (
        <div style={containerStyle}>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
            <div style={ itemStyle }></div>
        </div>
    );
}

结果

Loading...