Grid in scss not properly showing

38 viewscsscss gridsass
0

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:

Reference

This is the result:

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?