If you are using create-react-app then remove the css that come along with create-react-app.

Else try

.container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas: ". h h h h h h h h h h h" "m c c c c c c c c c e e" "f f f f f f f f f f f f";
}

This fills the whole browser. Note the width:100vw rather than width:100vh:

<div style="width:100vw; height:100vh ; background-color: red;"></div>

I’m sure this is a trivial (and perhaps stuid) issue, but I can’t get it to work.

I’m trying to use css grid in my react project, but for some reason, there is a huge margin outside of the outer container, and I don’t know how to remove it.

Here’s the html:

<div className="container">
    <div className="header">HEADER</div>
    <div className="menu">MENU</div>
    <div className="content">CONTENT</div>
    <div className="extra">EXTRA</div>
    <div className="footer">FOOTER</div>
 </div>

And here is the css:

.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas:
  ". h h h h h h h h h h h"
  "m c c c c c c c c c e e"
  "f f f f f f f f f f f f";
}

.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas: ". h h h h h h h h h h h" "m c c c c c c c c c e e" "f f f f f f f f f f f f";
}

<div className="container">
  <div className="header">HEADER</div>
  <div className="menu">MENU</div>
  <div className="content">CONTENT</div>
  <div className="extra">EXTRA</div>
  <div className="footer">FOOTER</div>
</div>

This is what it looks like:

I tried to manage the margin: margin: 0 in several ways, and increase the width width: 100%, but nothing works. Additionally, when I remove the margin, it moves the content to the start, and I cannot move it with either justify-content: center or justify-self: center.

I’m using react as well, but I’m only rendering this component, and outer div it returns is the .container div.

Thank you.

EDIT: I found a bootstrap import in a react file that was rendering this component, which was the issue. Sorry. facepalm. So using width: 100vw as suggested actually worked.