Css grid area not binding areas as intended

February 16, 2022

So, I’m facing an issue where my grid areas are not bound like I want them to be.
I’m trying to get one block per line, on different columns, but they appear to all stack on the first line.

This is how they are bound. They ain’t in their areas and I’m wondering why.

screenshot

.aboutpage {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: grid;
  grid-template-areas: 
    'a . .'
    '. . b'
    'c . .'
  ;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 2rem;
  background: #000;
}

.info {
  grid-area: 'a';
  background: palegreen;
}

.textA {
  grid-area: 'b';
  background: palevioletred;
}

.textB {
  grid-area: 'c';
  background: palegoldenrod;
}

.main_title {
  font-family: 'Abril Fatface', cursive;
  letter-spacing: .15rem;
  font-size: clamp(2rem, 3vw, 8rem);
  text-align: center;
  margin-bottom: 5rem;
}

<section class='aboutpage'>
  <h1 class='main-title'>About me</h1>

  <div class='content'>
    <div class='info'>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, cupiditate dignissimos! Fugit officia voluptate facere aut alias quaerat!
    </div>

    <p class='textA'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt inventore, ipsum optio nostrum nulla, quibusdam temporibus, beatae distinctio eaque doloribus nobis repellendus sapiente eos ea.</p>
    <p class='textB'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, autem? Quibusdam expedita totam fugit perferendis officiis, eius soluta.</p>
  </div>
</section>

Thanks to anyone who can help me with this!

>Solution :

Use your browser’s dev tool inspect facility on one of the misplaced items.

You will see that it has a warning that the value is illegal.

That is because you have put quotes around the value (‘a’, ‘b’ and ‘c’).

Remove those and all is well.

.aboutpage {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: grid;
  grid-template-areas: 'a . .' '. . b' 'c . .';
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 2rem;
  background: #000;
}

.info {
  grid-area: a;
  background: palegreen;
}

.textA {
  grid-area: b;
  background: palevioletred;
}

.textB {
  grid-area: c;
  background: palegoldenrod;
}

.main_title {
  font-family: 'Abril Fatface', cursive;
  letter-spacing: .15rem;
  font-size: clamp(2rem, 3vw, 8rem);
  text-align: center;
  margin-bottom: 5rem;
}

<section class='aboutpage'>
  <h1 class='main-title'>About me</h1>

  <div class='content'>
    <div class='info'>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, cupiditate dignissimos! Fugit officia voluptate facere aut alias quaerat!
    </div>

    <p class='textA'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt inventore, ipsum optio nostrum nulla, quibusdam temporibus, beatae distinctio eaque doloribus nobis repellendus sapiente eos ea.</p>
    <p class='textB'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, autem? Quibusdam expedita totam fugit perferendis officiis, eius soluta.</p>
  </div>
</section>