Comment puis-je étendre une division sur plusieurs lignes et colonnes dans une grille sans utiliser la disposition de grille ou les tableaux CSS ?

Divisions multi-lignes et colonnes dans une grille

Vous cherchez une solution pour étendre un div sur plusieurs lignes et colonnes dans une grille, sans utiliser la disposition en grille CSS ou les tableaux.

Prise en charge récente du navigateur pour la disposition en grille

Bien que vous ayez des inquiétudes concernant la prise en charge du navigateur par la disposition en grille au moment de votre message, les versions récentes des principaux navigateurs offrent désormais une prise en charge complète. Pour plus de détails sur la prise en charge actuelle du navigateur, veuillez vous référer à la documentation pertinente.

Solution utilisant la mise en page en grille CSS

Avec la mise en page en grille, obtenir la mise en page souhaitée devient simple sans modifications HTML, conteneurs imbriqués ou hauteurs de conteneurs fixes. Voici un extrait de code :

<code class="css">#wrapper {
  display: grid; // Enable Grid Layout (1)
  grid-template-columns: repeat(5, 90px); // Define columns (2)
  grid-auto-rows: 50px; // Define rows (3)
  grid-gap: 10px; // Set cell spacing (4)
  width: 516px;
}

.tall {
  grid-row: 1 / 3; // Span across rows 1 to 2 (5)
  grid-column: 2 / 3; // Span across columns 2 to 2 (5)
}

.wide {
  grid-row: 2 / 4; // Span across rows 2 to 3 (6)
  grid-column: 3 / 5; // Span across columns 3 to 4 (6)
}

.block {
  background-color: red;
}</code>

<code class="html"><div id="wrapper">
  <div class="block"></div>
  <div class="block tall"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div></code>

Cette solution aligne efficacement vos plus gros éléments au centre de la grille, selon la disposition souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!