React CSS Grid

npx create-react-app my-react-grid  
cd my-react-grid
code .

import "./App.css";

function App() {
  return (
    <div className="grid-container">
      <div className="header-container">Header</div>
      <div className="body-container">body</div>
      <div className="footer-container">Footer</div>
    </div>
  );
}

export default App;

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header header header header"
    "body body body body body body"
    "footer footer footer footer footer footer";
  gap: 10px;
  padding: 10px;
}

.header-container {
  grid-area: header;
}
.body-container {
  grid-area: body;
  height: 100vh;
}
.footer-container {
  grid-area: footer;
}