Comment étendre les lignes et les colonnes avec la grille CSS ?

Divers entre lignes et colonnes dans une grille

En nous appuyant sur la question de l'expansion verticale des divs dans une grille, nous explorons maintenant un défi plus complexe : s'étendre simultanément sur les lignes et les colonnes. Dans une rangée de cinq éléments, comment pouvons-nous positionner stratégiquement des éléments plus grands au centre ?

Approches non idéales

Flotter l'élément sur le côté est un résultat inhérent du comportement de la propriété float. De plus, ni les tableaux HTML ni la disposition de grille CSS ne sont des solutions viables ici.

Compatibilité des navigateurs

CSS Grid offre une solution transparente, mais la prise en charge des navigateurs a toujours été limitée. Cependant, les mises à jour récentes des principaux navigateurs ont rendu Grid Layout entièrement disponible.

CSS Grid Solution

Grid Layout fournit une solution élégante. Sans modifier le HTML, les conteneurs imbriqués ou définir des hauteurs fixes :

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

Pour s'étendre sur des lignes et des colonnes spécifiques :

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

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

En définissant les lignes et les colonnes de début et de fin, nous pouvons contrôlez avec précision la taille et la position des divs dans la grille, pour obtenir 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!