<div class="grid">
<div class="griditem1">1</div>
<div class="griditem2">2</div>
<div class="griditem3">3</div>
<div class="griditem4">4</div>
<div class="griditem5">5</div>
<div class="griditem6">5</div>
</div>
[class^="griditem"] {
color: white;
text-align: center;
font-size: 3rem;
background-color: blue;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
grid-template-areas: "header header header header"
"main main sidebar sidebar"
"main main sidebar sidebar"
"footer footer footer footer";
grid-auto-flow: dense;
grid-gap: 10px;
}
.griditem1 {
grid-area: header;
}
.griditem2 {
grid-area: main;
}
.griditem3 {
grid-area: sidebar;
}
.griditem4 {
grid-column-start: main-start;
grid-column-end: sidebar-end;
background-color: rgba(250, 0, 0, .5);
grid-row: 3;
}
.griditem5 {
background-color: rgba(250, 0, 0, .5);
grid-column-start: sidebar-start; /* only takes up one cell because grid-column-end default value is one */
grid-row-start: sidebar-start;
}
.griditem6 {
grid-area: footer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.