0

I seem not to be able troubleshoot why it is not placing my content inside the desired 2nd column in the second row of the grid. The code is following:

body {
 display: grid;
 grid-template-columns: 1fr 2fr 2fr 1fr;
 grid-template-rows: 1fr 2fr 2fr 2fr;
 width: 100%;
 height: 100%;
}

header.hdr {
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 width: 100%; 
  grid-column: 1 / 5;
  background-color: grey;
 }

 p.lhs-txt {
  width: 100%;
  font-size: 2em;
  display: flex;
  height: 20rem;
  grid-area: 2 / 2 / 4 / 4;
 }
<body>
 <header class="hdr">
  <h1> Main header of the page</h1>
 </header>
 <section class="sect">
  <p class="lhs-txt"> Lee Man-hee, the leader of the Shincheonji Church of Jesus, got on his knees and bowed at a news conference.
  About 60% of the country's more than 4,000 confirmed cases are sect members.  </p>
  <img src="logo.png" width="150rem">
  <p> On Monday, South Korea - the biggest hotspot outside China - reported 476 new cases, bringing the total number to 4,212. It has recorded 26 deaths. </p>
  <p>Prosecutors have been asked to investigate Mr Lee on possible charges of gross negligence. "Although it was not intentional, many people have been infected," said the 88-year-old leader. </p>
  <p>"We put our utmost efforts, but were unable to prevent it all." </p>
     </section>
</body>

please point me to the right direction, why is it not placed where I want it to be. Thank You all..

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
martinK
  • 93
  • 1
  • 9
  • 1
    `p.lhs-txt` is not a grid item. You need to either: 1. Move your `p` element under `body` element 2. Give `section` element `display: grid` property 3. Add `display: inherit` to section element – Mr T Mar 02 '20 at 13:44
  • It is not grid item? I think I don't understand - it is suppose to be just a class for css...how should I change it? I can not name my class watever I want and define the position in css? – martinK Mar 02 '20 at 13:47
  • OK, if I understand it right, every time I go deeper into the structure of the html I have to define the `display:grid` again? It is not defined for everything if its under the `body`? – martinK Mar 02 '20 at 13:49
  • 1
    Yes, that is correct – Mr T Mar 02 '20 at 13:50
  • Sorry, I am new just learning these things, I might probably sound stupid but - if I define the `body` as grid, create `section` under it and lets say another `div` under that section - I have to add either `display:grid` to all of them or `display:inherit`? Is it like this? – martinK Mar 02 '20 at 13:53
  • 1
    Exactly. You can read more about css grid [here](https://css-tricks.com/snippets/css/complete-guide-grid/) – Mr T Mar 02 '20 at 13:58
  • 1
    Thanks guys, that cleared a lot of questions for me :) – martinK Mar 02 '20 at 13:59

0 Answers0