Comment étendre une division sur plusieurs lignes et colonnes sans grille CSS ni tableaux HTML ?

Comment étendre une division sur plusieurs lignes et colonnes sans grille CSS ni tableaux HTML

Souvent, nous sommes confrontés à la tâche de créer une disposition de type grille avec des éléments s'étendant plusieurs lignes et colonnes. Cependant, l'utilisation d'une grille CSS ou de tableaux HTML n'est peut-être pas l'approche souhaitée. Cet article propose une solution sans grille et sans tableau.

Considérez un extrait comportant une rangée de cinq éléments, dans le but de placer des éléments plus grands au milieu. En utilisant la propriété display: inline-block, nous pouvons obtenir une disposition horizontale :

<code class="css">#wrapper {
  width: 516px;
}

.block {
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}</code>

Mais comment gérer l'étendue verticale ?

Cependant, en 2017, les principaux navigateurs ont publié des mises à jour avec prise en charge complète de CSS Grid Layout, offrant une solution simple. En utilisant la propriété display:grid, nous pouvons créer une disposition de grille sans modifier le code HTML ni ajouter de conteneurs imbriqués :

<code class="css">#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}</code>

Pour répartir les éléments sur plusieurs lignes et colonnes, nous utilisons la ligne de grille et la colonne de grille. propriétés :

<code class="css">.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}</code>

Ainsi, nous obtenons une disposition en grille avec des éléments s'étendant sur plusieurs lignes et colonnes, sans recourir aux tableaux HTML ou à la grille CSS.

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!