Css網格區域未按預期系結區域-有解無憂

所以，我面臨一個問題，我的網格區域沒有像我想要的那樣系結。我試圖在不同的列上每行獲得一個塊，但它們似乎都在第一行堆疊。

這就是它們的系結方式。他們不在他們的領域，我想知道為什么。

截屏

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

感謝任何可以幫助我的人！

uj5u.com熱心網友回復：

使用瀏覽器的開發工具檢查工具檢查其中一個放錯位置的專案。

您將看到它有一個警告，表明該值是非法的。

那是因為您在值周圍加上了引號（'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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/425210.html

標籤：css 网格

上一篇：固定頁眉和頁腳，縱橫比正文

下一篇：在js中，如何用css字符設定按鈕標題