I'm trying to make a grid layout with repeating 2 vertical, 2 horizontal sections. Then 2 horizontal, 2 verticals, and we repeat again.
Like this:
.container {
max-width:940px;
margin: 0 auto;
}
.grid-container {
counter-reset: div;
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 186px;
grid-gap:20px;
justify-content:center;
grid-template-areas:
"vert1 vert2 hor1 hor1"
"vert1 vert2 hor2 hor2"
"hor3 hor3 vert3 vert4"
"hor4 hor4 vert3 vert4"
}
.item-a {
grid-area: vert1;
}
.item-b {
grid-area: vert2;
}
.item-c {
grid-area: hor1;
}
.item-d {
grid-area: hor2;
}
.item-e {
grid-area: hor3;
}
.item-f {
grid-area: hor4;
}
.item-g {
grid-area: vert3;
}
.item-h {
grid-area: vert4;
}
.item-j {
grid-area: hor2;
}
.item-k {
grid-area: hor2;
}
.item-l {
grid-area: hor2;
}
.item-m {
grid-area: hor2;
}
.grid-container > div {
box-shadow: 0 0 11px 0 #b9b9b9;
}
.grid-container > div:before {
counter-increment: div;
content: counter(div);
margin: auto;
font-size: 40px;
display:flex;
}
<div class="container">
<div class="grid-container">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-c"></div>
<div class="item-d"></div>
<div class="item-e"></div>
<div class="item-f"></div>
<div class="item-g"></div>
<div class="item-h"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
I can't find a way to get it on the auto(infinite) rows, only with grid-template-areas.
grid-template-areas:
"vert1 vert2 hor1 hor1"
"vert1 vert2 hor2 hor2"
"hor3 hor3 vert3 vert4"
"hor4 hor4 vert3 vert4"
Someone got any ideas?
You may consider many grid container that you repeat like below:
.container {
max-width: 940px;
margin: 0 auto;
counter-reset: div;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 20px;
margin-bottom:20px;
}
.grid-container:nth-child(2n+1) {
grid-template-areas:
"v1 v2 h1 h1"
"v1 v2 h2 h2"
}
.grid-container:nth-child(2n) {
grid-template-areas:
"v1 v1 h1 h2 "
"v2 v2 h1 h2 "
}
.item-a {
grid-area: v1;
}
.item-b {
grid-area: v2;
}
.item-c {
grid-area: h1;
}
.item-d {
grid-area: h2;
}
.grid-container>div {
box-shadow: 0 0 11px 0 #b9b9b9;
}
.grid-container>div:before {
counter-increment: div;
content: counter(div);
font-size: 40px;
}
<div class="container">
<div class="grid-container">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-c"></div>
<div class="item-d"></div>
</div>
<div class="grid-container">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-c"></div>
<div class="item-d"></div>
</div>
<div class="grid-container">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-c"></div>
<div class="item-d"></div>
</div>
<div class="grid-container">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-c"></div>
<div class="item-d"></div>
</div>
<div class="grid-container">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-c"></div>
<div class="item-d"></div>
</div>
</div>
In case you need to have only one grid you can consider the fact that you have a pattern that repeat each 8 elements and use nth-child()
like below
.grid-container {
max-width: 940px;
margin: 0 auto;
counter-reset: div;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-auto-flow: dense;
grid-gap: 20px;
}
.grid-container> :nth-child(8n + 1),
.grid-container> :nth-child(8n + 2),
.grid-container> :nth-child(8n + 7),
.grid-container> :nth-child(8n + 8) {
grid-row: span 2;
}
.grid-container> :nth-child(8n + 3),
.grid-container> :nth-child(8n + 4),
.grid-container> :nth-child(8n + 5) {
grid-column: span 2;
}
.grid-container> :nth-child(8n + 6) {
grid-column: 1/span 2;
}
.grid-container>div {
box-shadow: 0 0 11px 0 #b9b9b9;
}
.grid-container>div:before {
counter-increment: div;
content: counter(div);
font-size: 40px;
}
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>