Css 网格区域未按预期绑定区域

Question

所以，我遇到了一个问题，我的网格区域没有像我希望的那样绑定。我试图在不同的列上每行获取一个块，但它们似乎全部堆叠在第一行。

这就是它们的绑定方式。他们不在他们的区域，我想知道为什么。

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>

感谢任何可以帮助我的人！

Answer 1

使用浏览器的开发工具检查工具检查其中一项错放的物品。

你会看到它有一个警告，指出该值是非法的。

那是因为您在值周围加上了引号（'a'、'b' 和 'c'）。

删除那些，一切都很好。

.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>

Css 网格区域未按预期绑定区域

Css grid area not binding areas as intended

css

grid