Depending on the width size of the browser, the grid area may not fit でも質問したのですが満足いく回答が得られなかったので、こちらでも質問します。
表題の通りで、ブラウザの横幅を伸ばしたり縮めたりしていると、グリッドエリアに隙間が生じているような動きをします。
確認したブラウザ:Chrome Version 85.0.4183.83 (Official Build) (64-bit)
コードは下記です。
<!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>
必ずと言えるか自信はないのですが、ブラウザの横幅が1085pxのときに再現すると思うので、ブラウザの動きを模倣するために該当ブロックを1085pxでラップしたクラスを用意したのが下記コードです。
<!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>
本家についた回答 を試したところ、機能したのですが、解説がぜんぜんないので私なりの解釈をすると、最小単位のグリッド全てに色を適用していくコードになっていると思うのですが、これだと、手間がかかるのと、修正したくなると修正箇所が増えてしまってできれば用いたくありません(SCSSとか使えば修正箇所を減らせるよというような意見が出そうですが...)。つまり card
クラスと同じ色であるのであれば他には指定したくない。
質問
- なぜこの隙間が生じるのでしょうか?
- どうすれば個別に色を指定することなくこの隙間を修正できますか?(もしくは知られている解法が個別に設定する方法しかないのであれば、なにか参考資料が見たいです)