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

user_19320475 0
Viewed 49

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 class="wrapper">
  <div class="first">
    123
  </div>
  <div class="second">
  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?

css html
2 Answers

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 class="wrapper">
  <div class="first">
    123
  </div>
  <div class="second">
  123456
  </div>
  </div>
</body>

</html>

user_101290530

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

user_10914250
Related