Home>

I am learning HTML and CSS. It mimics the reference site.
https://manablog.org/

To make the layout like the reference site (after the navigation bar) when the screen width is 768 px or more
I would like to try changing the layout using grid-template-areas.

For some reason, it has a two-column layout and I can't control it.

Applicable source code

↓ Due to the character limit, the image file name and some sentences are omitted.

<main>                                                     How to start programming learning
                                READ MORE                                                                    Blog-type Affili complete lecture
                                READ MORE                                                                     Start a paid community
                                READ MORE                                              <time>2020/08/12</time>                  8 hours working        <p>LIFE Work</p>                                      <p>If I want to increase your income,</p>                    READ MORE                                              <time>2020/08/06</time>                  [Fact] Office worker        <p>LIFE Work</p>                                      <p>I'm just sick</p>                    READ MORE                                              <time>2020/08/04</time>                  [Modern magic]        <p>LIFE</p>                                      <P>Hello,</p>                    READ MORE                                              <time>2020/07/23</time>                  Tips for reading        <p>BOOKS</p>                            <P>Hello,</p>                    READ MORE                                              <time>2020/07/22</time>                  [Recent report]        <p>LIFE</p>                                      <p>Last night</p>                    READ MORE                                              <time>2020/07/21</time>                  22 years old        <p>LIFE Work</p>                                      <p>If i am in your twenties,</p>                    READ MORE                                              <time>2020/07/20</time>                  For Japan,        <p>LIFE</p>                                      <p>Overseas</p>                    READ MORE                                              <time>2020/07/19</time>                  [Zen]        <p>LIFE</p>                                      <p>Game</p>                    READ MORE                                              <time>2020/07/17</time>                  Work        <p>LIFE Work</p>                                      <p>Wow,</p>                    READ MORE                                              <time>2020/07/16</time>                  [Caution]        <p>LIFE</p>                                      <p>With credit</p>        READ MORE                                        next page                                                    Manab          <hr>        <P>Blog</P>                                        Profile details
              <i></i>                                                      <form method="get" action="">                          <input type="text" name="s" placeholder="Search for...">            <span>            </span>                      </form>                              Read articles          <hr>                                                [Notice]                                                            Archive          <hr>        <ul>          <li>August 2020</li>    </aside>  <!--</section>-->  </main><footer>        About me!    <hr>  <p>      blog
    </p>            »Click here for profile details                    Portfolio    <hr>  <ul>    <li>dead BLOG</li>  </ul>            Twitter    <hr>    Tweets by kyohei_nakano<script async src="https ://platform.twitter.com/widgets.js" charset="utf-8"></script>          <p>Copyright-Manabu Bannai, 2019 All Right Reserved.</p>  </footer>
@media (min-width:768px){
  .container{
    width:750px;
    margin-left: auto;
    margin-right: auto;
  }
  .container2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(35, 280px);
    grid-template-areas:
    "one two Three"
    "one two Three"
    "4 4 14"
    "4 4 14""4 4 15"
    "5 5 16"
    "5 5 16"
    "5 5 16"
    "6 6 16"
    "6 6 16"
    "6 6 17"
    "7 7 17"
    "7 7 17"
    "7 7 17"
    "8 8 17"
    "8 8 17"
    "8 8 17"
    "9 9 17"
    "9 9 17"
    "9 9 17"
    "10 10 17"
    "10 10 17"
    "10 10 17"
    "11 11 17"
    "11 11 17"
    "11 11 ."
    "12 12 ."
    "12 12 ."
    "12 12 ."
    "13 13 ."
    "13 13 ."
    "13 13 ."
    "18 19 20"
    "18 19 20"
    "18 19 20";
  }
  .box1{grid-area: 1;}
  .box2{grid-area: 2;}
  .box3{grid-area: 3;}
  .box4{grid-area: 4;}
  .box5{grid-area: 5;}
  .box6{grid-area: 6;}
  .box7{grid-area: 7;}
  .box8{grid-area: 8;}
  .box9{grid-area: 9;}
  .box10{grid-area: 10;}
  .box11{grid-area: 11;}
  .box12{grid-area: 12;}
  .box13{grid-area: 13;}
  .profile{grid-area: 14;}
  .form-group{grid-area: 15;}
  .popular{grid-area: 16;}
  .archive{grid-area: 17;}
  .about-me{grid-area: 18;}
  .portfolio{grid-area: 19;}
  .twitter{grid-area: 20;}
  .next{grid-area: 21;}
}
What I tried

・「Grid-template-columns:」「grid-template-rows:」
↑ When I changed the numerical value, the height of the article changed and I could confirm the change in behavior.
Even if the above is changed, the second row is not arranged in the third row.

・Grid-template-areas: ← No change even if the value is changed
No typographical error in grid-area

-I was able to create a layout that is close to what it is by specifying the grid lines below.
However, when laying out the elements (articles, profiles, portfolios, etc.) created separately by

, the layout will not work unless the elements are placed directly under container2, so
is invalidated.
Is there a way to avoid obscuring the structure of the source?

.container2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
.box1{
    grid-row: 1;
    grid-column: 1;
  }
  .box2{
    grid-row: 1;
    grid-column: 2;
  }
  .box3{
    grid-row: 1;
    grid-column: 3;
  }
  .box4{
    grid-row: 2/4;
    grid-column: 1/3;
  }
Supplemental information (FW/tool ​​version, etc.)

Please provide more detailed information here.

  • Answer # 1

    Area names specified in grid-template-areas are numbers, or names that start with numbers are NG.
    For example, change it to one that starts with an alphabet as shown below.

      grid-template-areas:
        "a1 a2 a3"
        "a1 a2 a3"
        "a4 a4 a14"
        "a4 a4 a14"

    However, in this case, when laying out the elements (articles, profiles, portfolios, etc.) created separately with

    , the layout would not work unless the elements were placed directly under container2.
    is disabled.

    The grid layout only listens to the immediate child elements of the grid container.
    If you want to use

    for the layout you want to mimic, using grid is inappropriate.
    The element you want to layout becomes a grandchild element.
    Also, even if you do not use
    , it is not appropriate because the cuts of the main and side elements are not always the same.

    Decide the structure with elements header, footer, main, nav, aside added in HTML5,
    I think it is appropriate to use CSS FlexBox for the layout of each content (since there is only one column or one row).

    Effective use of header,footer,main,nav,article,aside,section

    If you use Grid, you should use it to decide the layout of header, footer, main, nav, aside.