<div class="container">
  <div class="grid-box">
    <div id="content">1</div>
    <div id="sidebar">2</div>
    <div id="content2">3</div>
    <div id="sidebar2">4</div>
    <div id="content3">5</div>
    <div id="sidebar3">6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>

.grid-box {
  display: grid; 
  grid-template-columns: repeat(4, 1fr); /*網格區塊的寬度大小*/
  grid-column-gap: 10px; /*網格區塊的左右間距*/
  grid-row-gap: 10px; /*網格區塊的上下間距*/
  grid-template-areas:
  "content content content sidebar"; /*網格區塊名稱*/
}
#content{
  grid-area: content; /*指定網格區塊名稱*/
  background:#ccaaff;
}
#sidebar{
  grid-area: sidebar;
  background:#cceeaa;
}
#content2{
  grid-column: 1/2; /*從第一條線到第二條線，因此只選擇了一個區塊範圍*/
  background:#ccaaff;
}
#sidebar2{
  grid-column: 2/5;
  background:#cceeaa;
}
#content3{
  grid-column: span 3; /*包含區塊的數量*/
  background:#ccaaff;
}
#sidebar3{
  grid-column: span 1;
  background:#cceeaa;
}
.grid-box>div{
  background:#eee;
}