Search code examples
htmlcsscss-grid

Depending on the width size of the browser, the grid area may not fit

If you stretch or shrink the width of your browser, there is an occasional margin in the bottom right corner.

enter image description here enter image description here

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.

enter image description here

Summary of Questions

  • How to fit the grid area?
  • Can you tell me why it doesn't fit if you can?
Solution

  • You could play by changing the background color of the elements for a better visual arrangement.

    <!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body {
      background: black;
    }

    .card {
      margin: 0 auto;
      max-width: 800px;
      
      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__title,
    .card__message {
      background: white;
    }

    .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>