If you stretch or shrink the width of your browser, there is an occasional margin in the bottom right corner.
How can I get rid of this white space?
In other words, I might say that I want the card__bottom_right
class to be spread out all over the side.
Why is it sometimes a perfect fit and sometimes a gap?
This is my 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>
It looks like the above snippet may not be reproduced by running it in a stack overflow, though If you look at the Full page, it reproduce the problem.
I don't know if this is always the case, but I reproduced it when the browser width is 1085px.
Using: Chrome Version 85.0.4183.83 (Official Build) (64-bit)
It's hard to reproduce the above, so I've prepared a class that mimics the behavior of the browser(wrap
class). I think it will be reproduced for sure.
<!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>
An enlarged image of the above sunippe run is shown below. You can see a white line in the lower right corner.
Summary of Questions
- How to fit the grid area?
- Can you tell me why it doesn't fit if you can?