I want to use grid but the display is not showing correctly I was wondering if I am doing something wrong:
HomeContainer.jsx:
import Explore from "@/components/higherComponent/Explore";
import NavBar from "@/components/higherComponent/Navbar";
import SearchBar from "@/components/higherComponent/SearchBar";
import Tags from "@/components/higherComponent/tags";
export default function start (){
return(
<div className="home_container">
<NavBar/>
<SearchBar/>
<Explore/>
<Tags/>
</div>
)
}
Each component has the classname assign as it should be, example: <NavBar/>
has classname="navbar" on the wrapper div.
HomeContainer.scss:
.home_container {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 0.5fr 1fr 1fr 1fr;
height: 100vh;
grid-template-areas:
"navbar searchbar searchbar"
"navbar explore tags"
"navbar explore tags"
"navbar explore tags";
.navbar {
grid-area: navbar;
}
.searchbar {
grid-area: searchbar;
background-color: saddlebrown;
}
.explore {
grid-area: explore;
}
.tags {
grid-area: tags;
}
}
I have in design exactly what I want:
This is the result:
As you can see the grid its behaving weird as the classname "navbar" its does not occupy the rows correctly and stops in the line 2.
I tried with conventional grid (placing each one with "grid-column : 1"; "grid-row: 1/4") still with close to none good results.
What may be causing this issue?