why my nest grid-template-column not working? HTML CSS-CodePudding

I have try to build two rows with two columns each, inside my right grid box however, it doesn't seem to be working. (it just appears as 4 rows) Can you all help me spot any mistake/ give me an advice of how to fix this pls?

.about__container {
  display: grid;
  position: relative;
  grid-template-columns: repeat(2, 1fr);
  height: 100vh;
  width: 100%;
  background-color: green;
  grid-gap: 30px;
}

.about__link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: red;
  grid-gap: 30px;
}

<div >
  <div >
    <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
  </div>

  <div >
    <div >
      <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
    </div>
    <div >
      <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum, tempore!
      </p>
    </div>
    <div >
      <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quia?
      </p>
    </div>
    <div >
      <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, amet!
      </p>
    </div>
  </div>
</div>

CodePudding user response：

In your css you used the wrong selector. In your html the class is .about___link but you have used .about__link as css selector. I changed it and it works but try to use a cleaner html and selectors wich are more readable :)

.about__container {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    height: 100vh;
    width: 100%;
    background-color:green;
    grid-gap: 30px;
}

.about___link{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: red;
    grid-gap: 30px;
}

<div >
                <div >
                  <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
                </div>

                <div >
                    <div >
                        <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
                    </div>
                    <div >
                        <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum,
                            tempore!</p>
                    </div>
                    <div >
                        <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quia?
                        </p>
                    </div>
                    <div >
                        <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, amet!
                        </p>
                    </div>
                </div>
            </div>

CodePudding user response：

Make sure (.container-fluid) is not overwriting the display property. Because, you wrote both classes in a single div tag.

Solution 1: Keep the (about__container) in the (container-fluid) div as a child element.

Solution 2: Inspect the element from your browser inspector and try to figure out the issue.

Solution 3: (not recommended) Use !important after CSS property!

For example:

.about__container {
     display: grid !important;
     position: relative;
     grid-template-columns: repeat(2, 1fr) !important;
     height: 100vh;
     width: 100%;
     background-color:green;
     grid-gap: 30px;
 }