Comment puis-je éviter les doubles bordures dans ma disposition de grille CSS ?

Éviter les doubles bordures dans la grille CSS

Dans les tableaux HTML, éliminer les doubles bordures est une tâche simple. Cependant, y parvenir dans une disposition en grille CSS peut sembler plus délicat. Voici comment procéder :

Pour éviter les doubles bordures, évitez d'appliquer directement une bordure aux éléments de la grille. Utilisez plutôt la couleur d'arrière-plan du conteneur (pour la couleur de la bordure) et la propriété grid-gap (pour la largeur de la bordure).

Code CSS :

.wrapper {
  display: inline-grid;
  grid-template-columns: repeat(4, 50px);
  grid-gap: 1px;
  border: 1px solid black;
  background-color: black;
}

.wrapper > div {
  background-color: white;
  padding: 15px;
  text-align: center;
}

Code 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>

En appliquant cette technique, vous pouvez obtenir une mise en page propre et à bordure unique en utilisant CSS grilles.

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!