css nested grid layout through grid naming layout and nth-child selector
everything was okay. but when i want to go make nested layout div.main:nth-child(2n+number)
. it was totally collapse.
*,
*::after,
*::before {
box-sizing: border-box;
}
.header {
grid-area: header;
}
.subheader {
grid-area: subheader;
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.leftbox {
grid-area: leftbox;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header ' 'box-1 box-1 leftbox ' 'box-2 box-3 leftbox ' '. subheader .' 'main main main ' '. . footer ';
grid-template-rows: repeat(3, minmax(50px, min-content));
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.main .first {
grid-area: first;
background: rgba(248, 248, 2, 0.116);
border: 5px solid rgb(251, 255, 0);
}
.main .third {
grid-area: third;
background: rgba(38, 0, 255, 0.171);
border: 5px solid rgb(4, 0, 255);
}
.main .second {
grid-area: second;
background: rgba(248, 2, 2, 0.034);
border: 5px solid rgb(255, 0, 0);
}
.grid-container div.main {
display: grid;
min-height: 100px;
grid-gap: 10px;
padding: 10px;
}
div.main:nth-child(2n+1) {
grid-template-areas: 'first second second third third';
}
div.main:nth-child(2n+2) {
grid-template-areas: 'first first second third third';
}
div.main:nth-child(2n+3) {
grid-template-areas: 'first first second second third';
}
<h1>Grid Layout</h1>
<div class="grid-container">
<div class="header">Header</div>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>
<div class="leftbox">leftbox</div>
<div class="subheader">Sub Header</div>
<div class="main">
<div class="first">First</div>
<div class="second">First</div>
<div class="third">First</div>
</div>
<div class="main">
<div class="first">Second</div>
<div class="second">Second</div>
<div class="third">Second</div>
</div>
<div class="main">
<div class="first">Third</div>
<div class="second">Third</div>
<div class="third">Third</div>
</div>
<div class="footer">Result</div>
</div>
It is also available on Codepen : enter link description here
*,
*::after,
*::before {
box-sizing: border-box;
}
.header {
grid-area: header;
}
.subheader {
grid-area: subheader;
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.leftbox {
grid-area: leftbox;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas:
'header header header '
'box-1 box-1 leftbox '
'box-2 box-3 leftbox '
'. subheader .'
'main main main '
'. . footer ';
grid-template-rows: repeat(3, minmax(50px, min-content));
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
div.main div.sub-container .first {
grid-area: first;
background: rgba(248, 248, 2, 0.116);
border: 5px solid rgb(251, 255, 0);
}
div.main div.sub-container .second {
grid-area: second;
background: rgba(248, 2, 2, 0.034);
border: 5px solid rgb(255, 0, 0);
}
div.main div.sub-container .third {
grid-area: third;
background: rgba(38, 0, 255, 0.171);
border: 5px solid rgb(4, 0, 255);
}
div.main div.sub-container:nth-child(2n+1) {
grid-template-areas:
'first second second third third';
}
div.main div.sub-container:nth-child(2n+2) {
grid-template-areas:
'first first second third third';
}
div.main div.sub-container:nth-child(2n+3) {
grid-template-areas:
'first first second second third';
}
div.main div.sub-container{
display: grid;
}
.grid-container div.main {
display: grid;
min-height: 100px;
grid-gap: 10px;
padding: 10px;
}
<h1>Grid Layout</h1>
<div class="grid-container">
<div class="header">Header</div>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>
<div class="leftbox">leftbox</div>
<div class="subheader">Sub Header</div>
<div class="main">
<div class="sub-container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
<div class="sub-container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
<div class="sub-container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
</div>
<div class="footer">Result</div>
</div>