a css grid that wraps items from different files
I’m writing a react project,I want to use css grid for seprate header and sidebar and main
Can i have a css grid-container in my app file (App.module.css) that wraps items from 3 different files (like "Navabar.module.css" , "sidebar.module.css","Messages.module.css")?
How?
here is part of App.js file
import "./App.css"; function App() { return ( <div className={styles.body}> <div className="grid-container"> <Navbar /> <SideBar /> <Messages /> </div> </div> ); } App.module.css
@import "Navbar.module.css"; @import "SideBar.module.css"; @import "Navbar.module.css"; .grid-container { display: grid; grid-template-areas: "header header header header header header" "menu main main main main main"; grid-gap: 10px; padding: 7px; background-color: darksalmon; } and here is Navbar.module.css
.item1 { grid-area: header; } 
