Comment éviter les doubles bordures dans les mises en page de grille CSS ?

Prévenir les doubles bordures dans la grille CSS

Problème :

Dans une disposition de grille CSS, comment pouvons-nous éliminer les doubles bordures entre les éléments de la grille ? Ceci est courant lors de l'utilisation de bordures à la fois sur le conteneur de grille et sur ses éléments enfants.

Réponse :

Réduire les bordures avec les propriétés de la grille

Pour éviter les doubles bordures, envisagez de remplacer la bordure des éléments de la grille par d'autres techniques utilisant la grille CSS propriétés :

1. Utiliser la couleur d'arrière-plan du conteneur :

Au lieu d'une bordure sur les éléments de la grille, appliquez la couleur de la « bordure » ​​comme couleur d'arrière-plan du conteneur.

CSS :

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border: 1px solid black;  // Define "border" color
  grid-gap: 1px;            // Set "border" width
  background-color: black; // Replaces border on grid items
}

2. Utiliser les espaces de grille :

La propriété grid-gap crée un espacement entre les éléments de la grille, imitant efficacement une largeur de « bordure ». Réglez l'écart sur la largeur de bordure souhaitée.

CSS :

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-gap: 1px; // Set "border" width
}

.wrapper > div {
  background-color: white; // No border on grid items
}

HTML :

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Par en utilisant ces techniques, vous pouvez éviter les doubles bordures dans les dispositions de grille CSS et obtenir une apparence propre et unifié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!