<div class="container">
<div class="grid-box">
    <div id="content">1</div>
    <div id="sidebar">2</div>
</div>
</div>
.grid-box {
  display: grid; 
  grid-template-columns: repeat(12,1fr);
  grid-column-gap: 10px; /* 設定左右間距 */
  grid-row-gap: 10px; /* 設定上下間距 */
  grid-template-rows: 100px;
  grid-template-areas:
    "c c c c c c s s s s s s";
}
#content{
   grid-area: c;
}
#sidebar{
   grid-area: s;
}

.grid-box>div{
  background:#eee;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.