-1

So, I'm running into a problem when I try to use grid-template-area where the defined areas are not being followed when I assign elements to them. The template areas are ignored completely. It just doesn't do anything. I originally was using SCSS, but thought that maybe the translation to CSS was causing problems. Taking out the SCSS file and combing through the CSS and HTML hasn't fixed the problem for me. I've been beating my head against this for over an hour and cannot figure it out. I've looked through other questions here that talk about grid-template-areas, but they haven't helped yet.

Repository: https://github.com/Hazipan/testimonials-grid

Challenge from Codementor: https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7

Live site: https://hazipan.github.io/testimonials-grid/

Code of note:

CSS

.testimonialGrid {
  grid-template-areas: 
    "daniel daniel jonathan kira"
    "jeanette patrick patrick kira";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
}

#daniel {
  grid-area: "daniel";
  background-color: hsl(263deg, 55%, 52%);
}

#jonathan {
  grid-area: "jonathan";
  background-color: hsl(217deg, 19%, 35%);
}

#kira {
  grid-area: "kira";
  background-color: white;
  color: black;
}

#jeanette {
  grid-area: "jeanette";
  background-color: white;
  color: black;
}

#patrick {
  grid-area: "patrick";
  background-color: hsl(219deg, 29%, 14%);
}

HTML

<main class="testimonialGrid">
    <div class="testimonial" id="daniel">
      ...
    </div>
    <div class="testimonial" id="jonathan">
      ...
    </div>
    <div class="testimonial" id="jeanette">
      ...
    </div>
    <div class="testimonial" id="patrick">
      ...
    </div>
    <div class="testimonial" id="kira">
      ...
    </div>
  </main>
Hazipan
  • 1
  • 1

1 Answers1

0

Figured it out and I feel stupid. It was because I had quotes around the value for grid-area. If anyone else has this problem, take the quotation marks of XD

Hazipan
  • 1
  • 1