<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;
}
This Pen doesn't use any external JavaScript resources.