<style>
  .grid {
    display: grid; /* 定义网格布局 */

    /* 定义3行6列 */
    grid-template-rows: 140px 140px 140px 140px; /* 每个值表示每行的高度 */
    grid-template-columns: 140px 140px 140px 140px 140px 140px; /* 每个值表示每列的宽度 */

    /* 定义item之间的间距为20px */
    grid-gap: 20px;
  }
  .item{
    background: #ccc;
  }
  .item-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    background: aquamarine;
  }
  .item-2 {
    grid-row-start: 1;
    grid-row-end: 3;

    grid-column-start: 3;
    grid-column-end: 5;
    
    background: lightcoral;
  }
  .item-5 {
    grid-row-start: 2;
    grid-row-end: 3;

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

    grid-column-start: 6;
    grid-column-end: 7;
    
    background: greenyellow;
  }
  .item-9 {
    grid-row-start: 3;
    grid-row-end: 4;

    grid-column-start: 2;
    grid-column-end: 4;
    
    background: fuchsia;
  }
</style>
<div class="grid">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item item-5">5</div>
    <div class="item">6</div>
    <div class="item item-7">7</div>
    <div class="item">8</div>
    <div class="item item-9">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.