Having trouble getting my grid display to cover the full size of the page. I have a grid with three columns controlled by two elements but it is not taking up the entire screen as expected. How can I make the grid fullscreen?
.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>