how can i make a grid container be in full size of a page?-CodePudding

Learning grid display and can't figure out how to make grid full size of a page. for example:

.wrapper {
  display: grid;
  border-style: solid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
grid-template-areas:
  'a a a'
  'a a a'
  'b b b';
}

.first {
  background-color: grey;
  grid-area: a;
}

.second {
  grid-area: b;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Oil Tycoon</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div >
  <div >
    123
  </div>
  <div >
  123456
  </div>
  </div>
</body>

</html>

here's three columns that picked by two element but they are not in a full size of a screen as should grid-template-area do. how do i make grid fullscreen?

CodePudding user response：

The body will only stretch as far as there will be content to fill the space. Therefor you should give both the grid and the body a min-height of 100vh. vh means "viewport height".

body, wrapper {min-height; 100vh;}

You can play with the solution on Codepen: https://codepen.io/jensgro/pen/bGLyXVy?editors=1100

Cheers, Jens

CodePudding user response：

I think this is due to browsers having built in margin or padding. Take a look at Normalize which resets browsers default styling behaviour.

I have added

body { margin: 0; padding: 0, min-height:100vh}

This removes margin and padding from the body resetting its default styles., you can then add you own margin to your elements.

body {
  margin: 0; padding:0, min-height:100vh
}

.wrapper {
  min-height:100vh
  display: grid;
  border-style: solid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
grid-template-areas:
  'a a a'
  'a a a'
  'b b b';
}

.first {
  background-color: grey;
  grid-area: a;
}

.second {
  grid-area: b;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Oil Tycoon</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div >
  <div >
    123
  </div>
  <div >
  123456
  </div>
  </div>
</body>

</html>