Comment placer une div/carte comme celle-ci ?

Question

J'ai du mal à positionner un div comme celui de la photo. &lt;divclass="cards"id="cards"&gt;&lt;divclass="container"&gt;&lt;divclass="single"&a

P粉680087550 · Answer

CSS Grid peut vous aider avec ces types de mises en page. Étudiez le code ci-dessous pour voir comment disposer les boîtes en fonction du modèle.

Assurez-vous de regarder de plus près la section suivante sur MDN à propos de 网格模板区域 : Laisser les cellules de la grille vides

div {
  border: 1px solid black;
}
.strategy {
  grid-area: strategy;
}
.efficient {
  grid-area: efficient;
}
.fast {
  grid-area: fast;
}
.reliable {
  grid-area: reliable;
}
.wrapper {
  width: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "fast efficient ." /* 3 cols: fast / efficient / . === empty col */
    ". strategy reliable";
}


  Fast
  Efficient
  Strategy
  Reliable

Ressources : Guide complet de la grille CSS