When adjusting the width of your browser, you may notice occasional white space in the bottom right corner.
https://i.stack.imgur.com/UFV6R.png https://i.stack.imgur.com/VfhMN.png
Is there a way to remove this extra margin?
In other words, how can I ensure that the card__bottom_right class occupies the entire side?
Why does it sometimes fit perfectly while at other times there is a gap?
This is the code snippet:
<!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;
}
/* Remaining CSS styles have been retained for reference */
</style>
</head>
<body>
<div class="card">
<div class="card__title">Title</div>
<div class="card__message">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>The reproduction of the issue in the above snippet might not be visible on Stack Overflow but should appear correctly on a full page view.
I encountered the issue when the browser width was set to 1085px using Chrome Version 85.0.4183.83 (Official Build) (64-bit).
To aid in reproducing the scenario, I have created a class named wrap that simulates the browser behavior. This should help replicate the problem effectively.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
background: black;
}
.wrap {
width: 1085px;
}
/* Similar CSS styles as before are used here to maintain context */
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<div class="card__title">Title</div>
<div class="card__message">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 showcasing the aforementioned issue can be viewed below.
https://i.stack.imgur.com/IsBlz.png
Questions Overview
- How can the grid area be properly fitted?
- If possible, what causes the misalignment in some cases?