Grid布局（简单易懂）

说明： 我用的是tsx文件编写的代码，然后用Windicss编写的css样式。 （Vue3）

呈现结果如图：

页面tsx文件：

export default defineComponent({
  setup() {
    return () => (
      <div class='w-full h-full p-12px' style='background: rgba(255,255,255,0.4)' >
        <div id='home-body-grid1' style={{ width: '100%', height: '100%', gap: '16px' }}>
          <div class='home-grid-a '>111111111111</div>
          <div class='home-grid-b '>222222222222</div>
          <div class='home-grid-c '>333333333333</div>
          <div class='home-grid-d '>444444444444</div>
          <div class='home-grid-e '>555555555555</div>

        </div>
      </div>

样式：

#home-body-grid1 {
  display: grid;   // 采用grid布局
  grid-template-columns: 1fr 1fr 1fr 1fr;  // 设置为4列 ，等比分配
  grid-template-rows: 1fr 3fr 3fr;  // 设置为3行， 比例为1：3：3
}

.home-grid-a {
  background-color: pink;
  grid-column-start: 1;     //  设置为从第一列开始到第五列结束（因为共4列，所以有5条纵向分割线）
  grid-column-end: 5;
  grid-row-start: 1;   // 设置从第一行开始到第二行结束（同理，因为共有3行，所以有4条横向分割线）
  grid-row-end: 2;
}
.home-grid-b {
  background-color: skyblue;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
 
}
.home-grid-c {
  background-color: #336FEF;
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;

}
.home-grid-d {
  background-color: purple;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;

}
.home-grid-e {
  background-color: orange;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4;
}