<div class="container2">
<div class="row2">
<div class="col2"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
body {
margin: 0px;
}
* {
box-sizing: border-box;
}
.container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px 30px;
}
.container2 {
padding: 0px 30px;
}
.row {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;
}
.row2 {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(11, 1fr 20px) 1fr;
}
.col {
height: 100vh;
background-color: rgba(255, 0, 0, 0.1);
}
.col2 {
height: 100vh;
background-color: rgba(0, 0, 255, 0.2);
grid-column: 3/9;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.