<section class='grid-1'>
<div class='title'></div>
<div class='day-1'></div>
<div class='day-2'></div>
<div class='day-3'></div>
<div class='day-4'></div>
<div class='day-5'></div>
<div class='day-6'></div>
<div class='day-7'></div>
<div class='day-8'></div>
<div class='day-9'></div>
<div class='day-10'></div>
<div class='day-11'></div>
<div class='day-12'></div>
<div class='day-13'></div>
<div class='day-14'></div>
<div class='day-15'></div>
<div class='day-16'></div>
<div class='day-17'></div>
<div class='day-18'></div>
<div class='day-19'></div>
<div class='day-20'></div>
<div class='day-21'></div>
<div class='day-22'></div>
<div class='day-23'></div>
<div class='day-24'></div>
</section>
/* mobile first grid layout */
.grid-1 {
display: grid;
width: 96%;
max-width: 900px;
margin: 2% auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 25px;
grid-template-areas: "t t t"
"d23 d20 d12"
"d2 d14 d4"
"d5 d22 d16"
"d1 d7 d9"
"d10 d11 d18"
"d13 d3 d15"
"d6 d17 d8"
"d19 d24 d21";
}
/* media query */
@media only screen and (min-width: 500px) {
.grid-1 {
grid-template-columns: repeat(6, 1fr);
grid-template-areas: "t t t d2 d7 d8"
"t t t d4 d11 d12"
"t t t d19 d9 d13"
"d6 d1 d24 d24 d21 d20"
"d17 d18 d24 d24 d5 d22"
"d3 d23 d16 d14 d10 d15";
}
}
section div {
background: #2e313d;
padding: 40px;
}
/* individual items */
.title {
grid-area: t;
}
.day-1 {
grid-area: d1;
}
.day-2 {
grid-area: d2;
}
.day-3 {
grid-area: d3;
}
.day-4 {
grid-area: d4;
}
.day-5 {
grid-area: d5;
}
.day-6 {
grid-area: d6;
}
.day-7 {
grid-area: d7;
}
.day-8 {
grid-area: d8;
}
.day-9 {
grid-area: d9;
}
.day-10 {
grid-area: d10;
}
.day-11 {
grid-area: d11;
}
.day-12 {
grid-area: d12;
}
.day-13 {
grid-area: d13;
}
.day-14 {
grid-area: d14;
}
.day-15 {
grid-area: d15;
}
.day-16 {
grid-area: d16;
}
.day-17 {
grid-area: d17;
}
.day-18 {
grid-area: d18;
}
.day-19 {
grid-area: d19;
}
.day-20 {
grid-area: d20;
}
.day-21 {
grid-area: d21;
}
.day-22 {
grid-area: d22;
}
.day-23 {
grid-area: d23;
}
.day-24 {
grid-area: d24;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.