Bagaimana untuk Mengelakkan Sempadan Berganda dalam Reka Letak Grid CSS?

Mencegah Sempadan Berganda dalam Grid CSS

Masalah:

Dalam susun atur grid CSS, bagaimana kita boleh menghapuskan sempadan berganda antara item grid? Ini adalah perkara biasa apabila menggunakan jidar pada kedua-dua bekas grid dan elemen anaknya.

Jawapan:

Runtuhkan Sempadan dengan Sifat Grid

Untuk mengelakkan sempadan berganda, pertimbangkan untuk menggantikan sempadan pada item grid dengan teknik ganti menggunakan grid CSS sifat:

1. Gunakan Warna Latar Belakang Bekas:

Daripada jidar pada item grid, gunakan warna "sempadan" sebagai warna latar belakang bekas.

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. Gunakan Jurang Grid:

Sifat jurang grid mencipta jarak antara item grid, meniru lebar "sempadan" dengan berkesan. Tetapkan jurang kepada lebar jidar yang diingini.

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>

Oleh menggunakan teknik ini, anda boleh menghalang sempadan dua dalam susun atur grid CSS dan mencapai penampilan yang bersih dan bersatu.

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