React CSS Grid

raboomar — Sun, 25 Sep 2022 22:43:25 +0000

Creating our app

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

Cleaning up our app: Delete everything in our App.js add four divs: 1) Container 2)header 3)main body 4)footer it should look like this once you're done.

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;

Next is cleaning up our app.css:
Delete everything and add the following code:

.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;
}

The grid template area is where we establish the cells in the grid and assign them names.
grid-area property specifies a grid item's size and location in a grid layout.
Giving the body a height of 100vh allows it to take the maximum height, pushing the header to the top and the footer to the bottom.

DEV Community: raboomar

React CSS Grid