[CSS]grid 전체 화면 문제

grid를 이용할 때 화면 전체를 이용할 수 없게 되는 경우가 있어서 이번에 그 문제를 해결해 보려고 시도했습니다. 이건 그 기록.

처음 문제의 화면. 화면 전체가 영역안으로 표시되지 않는 것을 확인할 수 있습니다.
grid
이 때의 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>login</title>
    <link rel="stylesheet" href="design.css">
    <link rel="Stylesheet" href="set.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body class="login_bg">
    <form action="mainpage.php" method="POST">
      <div class="login_grid">
        <div id="login_id">아이디</div>
        <input type="text" name="id" id="login_src">
        <input type="submit" name="login_btn" id="login_btn">
      </div>
    </form>
  </body>
</html>

.login_grid {
  display : grid;
  grid-template-columns : repeat(16, 1fr);
  grid-template-rows : repeat(9, 1fr);
}
/*적당히 배치한 것(나중에 수정할 예정이었음)*/
#login_id { grid-area : 3/4/4/5; } 
#login_src { grid-area : 6/5/7/9; }
#login_btn { grid-area : 10/8/11/12; }

/*background setting*/
.login_bg { 
  background-image: url("login.png");
  background-size: cover;
  background-repeat: no-repeat;
}

개발자도구로 확인해본 결과 body 태그의 default 값인 display : block 때문에 그런건가 의심이 들었습니다. 뭐가 문제인가 싶었지만 그 외에는 딱히 문제를 발견할 수 없었습니다.
grid

이번엔 감싸는 div class="login_grid" 태그로 form태그를 감싼 채 다시 실행해보았습니다.
grid

첫번째 칸에 하위 모든 태그들이 들어 있었습니다. 왜 그럴까 고민하다 찾아보니 display 속성은 상속이 되지 않는다는 것을 떠올려보니 이해할 수 있었습니다. 그렇다면 inherit property를 넣어 하위의 요소에게도 적용할 수 있을지 테스트해보았습니다. 여기는 이미지 파일이 없지만 결과는 inherit한 태그가 새로운 grid를 생성하는 것을 확인하였습니다. 물론 그렇게 만들수도 있지만 제가 원하는 것은 하나의 그리드를 생성한 후 여러 태그들을 조정하는 것이었기 때문에 다른 방법을 찾아보기로 하였습니다.
grid

이번엔 새로운 파일을 생성해서 기존 파일과 비교해보았습니다.

<html>
<head>
<style>
.login_grid {
  display : grid;
  grid-template-columns : repeat(12, 1fr);
  grid-template-rows : repeat(9, 1fr);
}
#login_id { grid-area : 3/4/4/5; }
#login_src { grid-area : 6/5/7/9; }
#login_btn { grid-area : 10/8/11/12; }

</style>
</head>
<body>
<div class="login_grid">
        <div id="login_id">아이디</div>
        <input type="text" name="id" id="login_src">
        <input type="submit" name="login_btn" id="login_btn">
</div>
</body>
</html>

이번 파일도 저번 파일과 form 태그를 제외하면 동일했는데 화면 전체가 grid 영역인 것을 확인할 수 있었습니다.
grid

body의 display 속성이 문제가 아니라면 grid의 rows의 숫자를 늘려야 하는 문제가 아닌지 고민해보았습니다. 실제로 grid-template-rows : repeat(9, 1fr); 대신 grid-template-rows : repeat(18, 1fr); 와 같이 그 수를 늘리면 grid 영역이 늘어납니다.
grid
grid

하지만 grid는 기본적으로 화면 전체를 기준으로 나누는 것이 아닌지 의문이 들었습니다.