<div class="grid-container">
<div class="grid-item item1">item1</div>
<div class="grid-item item2">item2</div>
<div class="grid-item item3">item3</div>
<div class="grid-item item4">item4</div>
<div class="grid-item item5">item5</div>
<div class="grid-item item6">item6</div>
<div class="grid-item item7">item7</div>
</div>
body{
margin: 0;
padding: 0;
}
.grid-container{
display: grid;
height: 300px;
grid-gap: 5px;
grid-template-columns: [c1] 150px [c2] 1fr [c3] 2fr [c4];
grid-template-rows: [r1] 150px [r2] 1fr [r3] 2fr [r4];
}
.grid-item{
background-color: #efefef;
border: 1px solid #ddd;
}
/*「grid-template-columns」「grid-template-rows」で指定した以外の大きさのレイアウト*/
.item4 {
grid-column: c1 / c3;
grid-row: r2 / r3;
}
.item5 {
grid-column: 3 / 4;
grid-row: 2 / span 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.