Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-11-04 02:57:01
original
199 Les gens l'ont consulté

How Can I Span a Div Across Multiple Rows and Columns in a Grid Without Using CSS Grid Layout or Tables?

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>
Copier après la connexion
<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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal