Pourquoi l'affichage de la grille à l'aide d'une zone de modèle de grille ne fonctionne-t-il pas ?
P粉541796322
P粉541796322 2023-09-09 16:28:13
0
1
733

J'essaie d'implémenter la disposition des éléments via la zone de modèle de grille, mais cela ne fonctionne pas. J'essaie d'utiliser un système de grille pour disposer les blocs verticalement et horizontalement. Utilisez l’image de gauche et le texte de l’autre côté. Pourquoi ce code ne fonctionne-t-il pas ?

.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粉541796322
P粉541796322

répondre à tous(1)
P粉513318114

Lorsque vous utilisez grid-template-areas时,您需要将grid-area, les valeurs sont attribuées aux éléments de la grille.
En bref, l'ajout du code css suivant permettra d'obtenir le résultat souhaité :

.news__item:first-child {
  grid-area: a;
}
.news__item:nth-child(2) {
  grid-area: b;
}
.news__item:nth-child(3) {
  grid-area: c;
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal