CSS グリッド レイアウトで二重枠を回避するにはどうすればよいですか?

CSS グリッドでの二重境界線の防止

問題:

CSS グリッド レイアウトで二重境界線を除去するにはどうすればよいですか?グリッド項目の間?これは、グリッド コンテナとその子要素の両方で境界線を使用する場合によく発生します。

答え:

グリッド プロパティで境界線を折りたたむ

二重境界線を回避するには、CSS グリッドを使用した別の手法でグリッド項目の境界線を置き換えることを検討してください。プロパティ:

1.コンテナの背景色を使用:

グリッド項目の境界線の代わりに、コンテナの背景色として「境界線」色を適用します。

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.グリッド ギャップを使用する:

グリッド ギャップ プロパティは、グリッド項目間にスペースを作成し、効果的に「境界線」の幅を模倣します。ギャップを希望の境界線の幅に設定します。

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>

Byこれらのテクニックを利用すると、CSS グリッド レイアウトの二重境界線を防ぎ、すっきりとした統一された外観を実現できます。

以上がCSS グリッド レイアウトで二重枠を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。