2. 使用flex和grid完成页面布局

<div className="home">
  <header style={{ backgroundImage: `url(${headerBg})` }} />
  <main>
    <section className="section1"></section>
    <section className="section2"></section>
    <section className="section3"></section>
    <section className="section4"></section>
    <section className="section5"></section>
  </main>
</div>

@import '../shared/helper';
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  > header {
    height: px(99);
    background-size: cover;
  }
  > main {
    flex: 1;
    display: grid;
    grid-template:
      'box1 box2 box4 box5' 755fr
      'box3 box3 box4 box5' 363fr / 366fr 361fr 811fr 747fr;
    gap: px(28);
    > .section1 {
      grid-area: box1;
      background: lightgray;
    }
    > .section2 {
      grid-area: box2;
      background: lightgray;
    }
    > .section3 {
      grid-area: box3;
      background: lightblue;
    }
    > .section4 {
      grid-area: box4;
      background: lightcyan;
    }
    > .section5 {
      grid-area: box5;
      background: lightyellow;
    }
  }
}