CSS グリッドレイアウトで二重枠を回避するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-09 10:03:06

オリジナル

421 人が閲覧しました

How Can I Avoid Double Borders in CSS Grid Layout?

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

CSS グリッドでは、セルが隣接しているときにグリッド項目の周囲の境界線によって二重境界線が表示されることがあります。このような二重境界線を除去するには、別のアプローチを使用できます。

グリッドアイテムに実際の境界線を使用する代わりに、グリッドコンテナーの背景色プロパティを使用して「境界線の色」効果を作成することを検討してください。さらに、grid-gap プロパティを使用して「境界線の幅」を指定することもできます。

この手法を示す例は次のとおりです。

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  border: 1px solid black;
  grid-gap: 1px;
  background-color: black;
}

.wrapper > div {
  background-color: white;
  padding: 15px;
  text-align: center;
}

ログイン後にコピー

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

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

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