Maison > interface Web > tutoriel CSS > Comment puis-je éviter les doubles bordures dans ma disposition de grille CSS ?

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

DDD
Libérer: 2024-12-05 00:50:11
original
353 Les gens l'ont consulté

How Can I Avoid Double Borders in My CSS Grid Layout?

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

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

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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal