An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Engadget
- Mashable
- Smashing Magazine
- Six Revisions
- You The Designer
- 24 Ways
- CSS Tricks
- Web Resource Source
- Android Dissected
- Daily Now
Help Webnuz
Referal links:
September 25, 2022 10:43 pm GMT
Original Link: https://dev.to/raboomar/react-css-grid-47mb
React CSS Grid
- Creating our app
npx create-react-app my-react-grid cd my-react-gridcode .- Cleaning up our app:Delete everything in our App.js add four divs:1) Container2)header 3)main body4)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.
Original Link: https://dev.to/raboomar/react-css-grid-47mb
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To