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

May 12, 2022

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 class="about__container container-fluid grid">
  <div class="about__content">
    <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
  </div>

  <div class="about___link container grid">
    <div class="item link__youtube">
      <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
    </div>
    <div class="item link__article">
      <p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum, tempore!
      </p>
    </div>
    <div class="item link__addfriend">
      <p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quia?
      </p>
    </div>
    <div class="item link__achievement">
      <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, amet!
      </p>
    </div>
  </div>
</div>

>Solution :

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 class="about__container container-fluid grid">
                <div class="about__content">
                  <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
                </div>

                <div class="about___link container grid">
                    <div class="item link__youtube">
                        <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim!</p>
                    </div>
                    <div class="item link__article">
                        <p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum,
                            tempore!</p>
                    </div>
                    <div class="item link__addfriend">
                        <p class="link-detail">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quia?
                        </p>
                    </div>
                    <div class="item link__achievement">
                        <p class="link-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, amet!
                        </p>
                    </div>
                </div>
            </div>