Bagaimanakah Saya Boleh Mengelak Sempadan Berganda dalam Reka Letak Grid CSS Saya?

Mengelakkan Sempadan Berganda dalam Grid CSS

Dalam jadual HTML, menghapuskan sempadan berganda adalah tugas yang mudah. Walau bagaimanapun, mencapainya dalam susun atur grid CSS mungkin kelihatan lebih rumit. Begini cara anda boleh melakukannya:

Untuk mengelakkan sempadan berganda, elakkan daripada menggunakan sempadan secara terus pada item grid. Sebaliknya, gunakan warna latar belakang bekas (untuk warna jidar) dan sifat jurang grid (untuk lebar jidar).

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

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

Dengan menggunakan teknik ini, anda boleh mencapai yang bersih dan reka letak satu sempadan menggunakan grid CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengelak Sempadan Berganda dalam Reka Letak Grid CSS Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!