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

CSS グリッドでの二重境界線の回避

HTML テーブルで二重境界線を除去するのは簡単な作業です。ただし、CSS グリッド レイアウトでこれを実現するのは難しいように思えるかもしれません。その方法は次のとおりです。

二重境界線を防ぐため、グリッド項目に境界線を直接適用しないでください。代わりに、コンテナの背景色 (境界線の色) とグリッド ギャップ プロパティ (境界線の幅) を利用します。

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

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>

この手法を適用すると、 CSS グリッドを使用した、すっきりとした単一枠のレイアウト。

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