suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum funktioniert die Anzeige des Rasters mithilfe eines Rastervorlagenbereichs nicht?

Ich versuche, die Elementanordnung über den Rastervorlagenbereich zu erreichen, aber es funktioniert nicht. Ich versuche, ein Rastersystem zu verwenden, um Blöcke vertikal und horizontal anzuordnen. Benutzen Sie das Bild links und den Text auf der anderen Seite. Warum funktioniert dieser Code nicht?

.news__wrapper {
  display: grid;
  grid-template-areas: "a a c" "b b c";
}

.news__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.news__item-image {
  width: 349px;
  height: 360px;
}

.news__item-image {
  background: "url(https://place-hold.it/300x500) 50% 50% no-repeat";
}
<div class="news__wrapper">
  <div class="news__item">
    <div class="news__item-image"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem ipsum
      </p>
    </div>
  </div>
  <div class="news__item">
    <div class="news__item-image" :style="imageNews1"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem
      </p>
    </div>
  </div>
  <div class="news__item">
    <div class="news__item-image" :style="imageNews1"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem ips
      </p>
    </div>
  </div>
</div>

https://codesandbox.io/s/blissful-bush-tngxm8?file=/src/styles.css

P粉541796322P粉541796322439 Tage vor698

Antworte allen(1)Ich werde antworten

  • P粉513318114

    P粉5133181142023-09-10 14:58:12

    当您使用grid-template-areas时,您需要将grid-area值分配给网格内的元素。
    简而言之,添加以下 css 代码将达到预期的结果:

    .news__item:first-child {
      grid-area: a;
    }
    .news__item:nth-child(2) {
      grid-area: b;
    }
    .news__item:nth-child(3) {
      grid-area: c;
    }

    Antwort
    0
  • StornierenAntwort