Wie kann ich doppelte Ränder in meinem CSS-Rasterlayout vermeiden?

Doppelte Ränder im CSS-Raster vermeiden

In HTML-Tabellen ist das Entfernen doppelter Ränder eine unkomplizierte Aufgabe. Allerdings scheint es schwieriger zu sein, dies in einem CSS-Rasterlayout zu erreichen. So können Sie es tun:

Um doppelte Ränder zu vermeiden, wenden Sie keinen Rahmen direkt auf Rasterelemente an. Verwenden Sie stattdessen die Hintergrundfarbe des Containers (für die Rahmenfarbe) und die Grid-Gap-Eigenschaft (für die Rahmenbreite).

CSS-Code:

.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;
}

HTML-Code:

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

Durch die Anwendung dieser Technik können Sie mithilfe von CSS ein sauberes Layout mit einem Rahmen erreichen Gitter.

Das obige ist der detaillierte Inhalt vonWie kann ich doppelte Ränder in meinem CSS-Rasterlayout vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!