grid css の横3列のときにできる隙間を消す方法

Question

grid css を使用して、画面幅いっぱいに画像を3つ、横並びにします。しかしながら、画像サイズは同じにしてあるものの、なぜか0.001pxの隙間ができてしまい、ぴったりになりません。

現在のコードはこちらです

<div class="image-wrapper">
   <img src="img/image01.png">
   <img src="img/image02.png">
   <img src="img/image03.png">
 </div>

.image-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

試したこと

  padding: 0;
  margin: 0;

お分かりになる方がいらっしゃれば、よろしくお願いいたします。

※※2022.12.17追記 隙間のスクショ※※

↓スマホの場合

Comments

[ems]

質問者です。
以下追記いたします。
画像に対して、以下css指定しています。
.image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

[Cocode]

画面幅を変更して、画像の大きさが変わったら隙間なくなったりしませんか？
それから、0.001pxの隙間はどこにできますか？→スクリーンショットで見せてもらえればより嬉しいです。
また、0.001pxという数値はどうやって分かりましたか？開発者ツールで数字が確認できたのでしょうか？

Answer 1

記載されたコードのみで試してみたところ、隙間は見当たりませんでしたので、質問文に記載されていない他のコードが干渉して、謎の隙間を生み出している可能性があると思います。

以下の方法で原因を探ってみてください。

• htmlファイルに複数のcssファイルを読み込んでいる場合は、cssファイルをひとつずつ無効化して、どのcssファイルを無効化したときに問題が解消されるか探る。
• 原因のcssファイルを1つに絞り込むことができたら、コードを少しずつコメントアウトして、どの記述に原因があるか探る。

あるいは、開発者ツールを活用して原因を探るのもよいと思います。
また、ブラウザ特有の問題である可能性や、cssではない別のプログラムが干渉している可能性も考慮してみてください。

Comments

[ems]

ありがとうございます。

全て試みてみたのですが、解消できませんでした...m(__)m

[退会済みユーザー]

隙間ができている部分のスクリーンショットを貼ることはできますか？

[ems]

ありがとうございます。
隙間のできている部分のスクショをアップいたしました。
ごくごくわずかなのですが、レスポンシブでスマホの場合も隙間ができてしまいます。
ちなみにアップしたものはパソコンで３カラムですが、２カラムも同様に、中央にごくわずかな隙間ができてしまっている状況です。

[退会済みユーザー]

スクリーンショットをありがとうございます。
隙間の大きさが0.001pxには見えないのですが、これはどういった根拠の数値でしょうか？

GoogleChromeの開発者ツールを使って、
この隙間のサイズを正確に測り、どのコードによって作られた隙間なのか調べてみてください。
（開発者ツールの使い方はググってください）

あとはcssはブラウザにキャッシュが残りがちなので、修正後は必ずスーパーリロードをするとか、調べ方についてのアドバイスしかできないです。がんばって調べてみてください。