Why is my CSS Grid Area not behaving like it should?

Question

So I am having trouble setting up a CSS Grid inside another CSS grid which is working fine. The first (outer) CSS grid is defined with a grid template column and row in addition to a grid row and grid column called on every element.

The difficult part is that I want to re-use many of the elements I am using in the first sub-grid in future sub-grids but different layouts. That is why I decided to use the grid-area call. Here is the part of my code that is causing problems:

.wrapperFour {
  height: 900vh;
  background-color: tan;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(9, 100vh);
}

.wrapperFour>div {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iPhone {
  grid-area: iPhone;
  height: 77.4074vh;
}

.featureLogo {
  grid-area: featureIcon;
  height: 116px;
}

.featureInfo {
  color: #4F4F4F;
}

.feature_header {
  grid-area: featureHeader;
  font-family: montserrat_bold;
  font-style: normal;
  font-weight: normal;
  font-size: 55px;
  line-height: 66px;
}

.feature_infotext {
  grid-area: featureInfotext;
  font-family: montserrat_regular;
  font-style: normal;
  font-weight: 300;
  font-size: 35px;
  line-height: 42px;
  margin-top: 40px;
}

.feature_cta {
  grid-area: featureCTA;
  height: 80px;
  width: 400px;
  background-color: #2F60A2;
  color: #FFFFFF;
}

.feature_cta_text {
  font-family: montserrat_regular;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: 42px;
}

.feature_left {
  display: grid;
  grid-template-columns: 13.85vw 21vw 7.81vw 43.49vw 13.85vw;
  grid-template-rows: 11.2vh 11.38vh 9.54vh 27.5252vh 16.66vh 12.3148vh 11.38vh;
  grid-template-areas: ".      .           .       .                   ." ".      iPhone      .       featureIcon         ." ".      iPhone      .       featureHeader       ." ".      iPhone      .       featureInfotext     ." ".      iPhone      .       featureCTA          ." ".      iPhone      .       .                   ." ".      .           .       .                   .";
  background-color: white;
}

.featureOne {
  background-color: rgb(31, 141, 155);
  grid-column: 1;
  grid-row: 1;
}

.featureTwo {
  background-color: rgb(126, 31, 155);
  grid-column: 1;
  grid-row: 2;
}

.featureThree {
  background-color: rgb(103, 119, 148);
  grid-column: 1;
  grid-row: 3;
}

<div class="wrapperFour">
  <div class="featureOne">
    <div class="feature_left">

      <div class="iPhone">
        <img src="Assets/iPhone Mockup 1.png" alt="Mockup1" class="iPhone">
      </div>

      <div class="featureInfo">
        <div class="featureLogo">
          <img src="Assets/Feature1Icon.png" alt="Feature 1 Icon" class="featureLogo">
        </div>
        <div class="feature_header">
          Lorem, ipsum dolor.
        </div>
        <div class="feature_infotext">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio eum fugit error voluptatem tempora! Soluta sit ipsa possimus quidem totam.
        </div>
        <div class="feature_cta">
          <div class="feature_cta_text">
            CTA Button
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="featureTwo">

  </div>
  <div class="featureThree">

  </div>

</div>

The issue is that only the iPhone image is going in the right grid area. The rest is just sticking to the left, so the first column. What am I doing wrong?

Answer 1

Could you describe what your goal is? Maybe make a screenshot of what you want it to look like?

Also, I've noticed you're using huge dimensions in your classes. For example:

.wrapperFour {
height: 900vh;
background-color: tan;

display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(9,100vh) ;
}

you set the wrapper height to be 900vh. This means the height is 9 times your screen's height (vh = view height)

Did you mean to set it this way?

another hint that might help you:

If you go to dev tools in chrome, and place the marker on your grid, you can see the layout that's rendered to the screen. Then you can try and play with the css properties and watch how your elements are aligned.

This is what it looks like with your snippet