嵌套命名网格布局折叠: nth-child()

Question

css通过网格命名布局和nth子选择器嵌套网格布局。

一切都很好。但是当我想要做嵌套布局时，div.main:nth-child(2n+number)。完全崩溃了。

​

*,
*::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>

​

它也可在Codepen：在这里输入链接描述上使用。

Answer 1

​

  *,
        *::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>

​

Answer 2

这是因为您正在将所有的.main元素添加到名为main的相同区域中。不要使用区域并简化代码，如下所示：

​

* {
  box-sizing: border-box;
}

.header {
  grid-column:span 3;
}

.subheader {
  grid-column: 2;
}

.box-1 {
  grid-column:span 2;
}

.leftbox {
  grid-column:3;
  grid-row:2/span 2;
}

.main {
  grid-column:span 3;
}

.footer {
  grid-column: 3;
}

.grid-container {
  display: grid;
  grid-auto-rows: 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 {
  background: rgba(248, 248, 2, 0.116);
  border: 5px solid rgb(251, 255, 0);
}

.main .third {
  background: rgba(38, 0, 255, 0.171);
  border: 5px solid rgb(4, 0, 255);
}

.main .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(3n+1) {
  grid-template-columns: 1fr 2fr 2fr;
}

div.main:nth-child(3n+2) {
  grid-template-columns: 2fr 1fr 2fr;
}

div.main:nth-child(3n+3) {
  grid-template-columns: 2fr 2fr 1fr;
}

<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>

​