70336


[Depending on the width size of the browser, the grid area may not
fit](https://stackoverflow.com/questions/63749451/depending-on-the-width-size-
of-the-browser-the-grid-area-may-not-fit)
でも質問したのですが満足いく回答が得られなかったので、こちらでも質問します。

表題の通りで、ブラウザの横幅を伸ばしたり縮めたりしていると、グリッドエリアに隙間が生じているような動きをします。

[![画像の説明をここに入力](https://i.stack.imgur.com/rIaIQ.png)](https://i.stack.imgur.com/rIaIQ.png)

確認したブラウザ：Chrome Version 85.0.4183.83 (Official Build) (64-bit)

コードは下記です。

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        body {
          background: black;
        }
    
        .card {
          margin: 0 auto;
          max-width: 800px;
          background: white;
          overflow: hidden;
    
          display: grid;
          grid-template:
            "card__title card__title card__title" 1fr
            "card__message card__message card__message" 1fr
            "card__bottom_left card__bottom_middle card__bottom_right" 1fr
            / 1fr 1fr 1fr;
        }
    
        .card__title {
          padding-top: 16px;
          padding-left: 16px;
          grid-area: card__title;
        }
    
        .card__message {
          padding-top: 16px;
          padding-left: 16px;
          grid-area: card__message;
        }
    
        .card__bottom_left {
          background: pink;
          padding-left: 16px;
          grid-area: card__bottom_left;
        }
    
        .card__bottom_middle {
          background: pink;
          grid-area: card__bottom_middle;
        }
    
        .card__bottom_right {
          background: pink;
          grid-area: card__bottom_right;
        }
    
      </style>
    </head>
    <body>
    
    <div class="card">
      <div class="card__title">タイトル</div>
      <div class="card__message">メッセージ</div>
      <div class="card__bottom_left">1</div>
      <div class="card__bottom_middle">2</div>
      <div class="card__bottom_right">3</div>
    </div>
    
    </body>
    </html>
[/code]

必ずと言えるか自信はないのですが、ブラウザの横幅が1085pxのときに再現すると思うので、ブラウザの動きを模倣するために該当ブロックを1085pxでラップしたクラスを用意したのが下記コードです。

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">
        body {
          background: black;
        }
    
        .wrap {
          width: 1085px;
        }
    
        .card {
          margin: 0 auto;
          max-width: 800px;
          background: white;
          overflow: hidden;
    
          display: grid;
          grid-template:
            "card__title card__title card__title" 1fr
            "card__message card__message card__message" 1fr
            "card__bottom_left card__bottom_middle card__bottom_right" 1fr
            / 1fr 1fr 1fr;
        }
    
        .card__title {
          padding-top: 16px;
          padding-left: 16px;
          grid-area: card__title;
        }
    
        .card__message {
          padding-top: 16px;
          padding-left: 16px;
          grid-area: card__message;
        }
    
        .card__bottom_left {
          background: pink;
          padding-left: 16px;
          grid-area: card__bottom_left;
        }
    
        .card__bottom_middle {
          background: pink;
          grid-area: card__bottom_middle;
        }
    
        .card__bottom_right {
          background: pink;
          grid-area: card__bottom_right;
        }
      </style>
    </head>
    <body>
      <div class="wrap">
        <div class="card">
          <div class="card__title">タイトル</div>
          <div class="card__message">メッセージ</div>
          <div class="card__bottom_left">1</div>
          <div class="card__bottom_middle">2</div>
          <div class="card__bottom_right">3</div>
        </div>
      </div>
    </body>
    </html>
[/code]

[本家についた回答](https://stackoverflow.com/a/63749691/1979953)
を試したところ、機能したのですが、解説がぜんぜんないので私なりの解釈をすると、最小単位のグリッド全てに色を適用していくコードになっていると思うのですが、これだと、手間がかかるのと、修正したくなると修正箇所が増えてしまってできれば用いたくありません（SCSSとか使えば修正箇所を減らせるよというような意見が出そうですが...）。つまり
`card`クラスと同じ色であるのであれば他には指定したくない。

# 質問

  * なぜこの隙間が生じるのでしょうか？
  * どうすれば個別に色を指定することなくこの隙間を修正できますか？（もしくは知られている解法が個別に設定する方法しかないのであれば、なにか参考資料が見たいです）


CC BY-SA 4.0
2020-09-12T13:43:42.787
70331
2020-09-13T01:25:06.150
2020-09-13T00:48:04.897
9008
9008
question
html css
ブラウザの横幅によっては、グリッドエリアに隙間ができてしまう


> なぜこの隙間が生じるのでしょうか？

それは **サブピクセルのレンダリング** に関する問題が原因です。この問題は 1px
以下の小さい値を各ブラウザが異なる方法で処理することに起因しています。このため、簡単かつ一般的に用いられる修正方法はありません。

>
> どうすれば個別に色を指定することなくこの隙間を修正できますか？（もしくは知られている解法が個別に設定する方法しかないのであれば、なにか参考資料が見たいです）

サブピクセルに関する詳細な情報は以下に書かれています。今回の場合、[質問文のリンク先で回答されている内容](https://stackoverflow.com/a/63749691/11932445)もこの問題に対処するための方法のひとつです。

  * [html - 1px calculation issue with browsers (sub-pixel problems) - Stack Overflow](https://stackoverflow.com/a/39211150/11932445)
  * [reactjs - CSS grid's slider - Why there is a distortion when I slide my grid? - Stack Overflow](https://stackoverflow.com/a/62340069/11932445)

* * *

既存の回答と似ている回避策ですが、 [`linear-gradient`
関数](https://developer.mozilla.org/ja/docs/Web/CSS/linear-
gradient)により隙間を埋めることでも対処することが出来ます。今回は行が 3 つあり、それぞれサイズが `1fr`
となっています。このうち背景色が白色なのは上 2 つの行です。このため、上側 3 分の 2
は白色で、残りはピンク色にするグラデーションを適用すれば良いとわかります。

これを実現するには [`linear-gradient`
関数](https://developer.mozilla.org/ja/docs/Web/CSS/linear-
gradient)を用います。まず第一引数には、上から下へグラデーションを適用したいので、 `180deg` を指定します。次に上側 3 分の 2
は白色にしたいため、白色の開始地点に `0`、終了地点に `100% * 2/3` を指定します。残りはピンク色にするため、ピンク色の開始地点に `100%
* 2/3`、終了地点に `100%` を指定します。なお、白色の開始地点及びピンク色の終了地点は省略可能なため、コード内では省いています。

[code]

    body {
      background: black;
    }
    
    .wrap {
      width: 1085px;
    }
    
    .card {
      margin: 0 auto;
      max-width: 800px;
      background: linear-gradient(180deg, #fff calc(200%/3), pink calc(200%/3));
      overflow: hidden;
      display: grid;
      grid-template: "card__title card__title card__title"1fr "card__message card__message card__message"1fr "card__bottom_left card__bottom_middle card__bottom_right"1fr / 1fr 1fr 1fr;
    }
    
    .card__title {
      padding-top: 16px;
      padding-left: 16px;
      grid-area: card__title;
    }
    
    .card__message {
      padding-top: 16px;
      padding-left: 16px;
      grid-area: card__message;
    }
    
    .card__bottom_left {
      background: pink;
      padding-left: 16px;
      grid-area: card__bottom_left;
    }
    
    .card__bottom_middle {
      background: pink;
      grid-area: card__bottom_middle;
    }
    
    .card__bottom_right {
      background: pink;
      grid-area: card__bottom_right;
    }
[/code]

[code]

    <div class="wrap">
      <div class="card">
        <div class="card__title">タイトル</div>
        <div class="card__message">メッセージ</div>
        <div class="card__bottom_left">1</div>
        <div class="card__bottom_middle">2</div>
        <div class="card__bottom_right">3</div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2020-09-13T00:28:59.170
70336
2020-09-13T01:25:06.150
2020-09-13T01:25:06.150
32986
32986
70331
answer