Kevin Powell - Community•2y ago

Help with grid

im using grid for mobile resonsiveness. when 400px is reached, im changing header from flex to grid so that the logo occupies the entire row, the second and thrid sibling should occupy 3/4 and 1/4 space respectively.

<div className="header ">
  <div className="logo ">
      <p>Cine Spectrum</p> 
   </div>

   <div className="nav_links_mobile ">
       <Link to="/Home"  ><AiOutlineHome /></Link>
      <Link to="/movies"><BiMoviePlay /></Link>
      <Link to="/tvshows"><RiComputerLine /></Link>
    </div>

    <div className="search flex">
        <BiSearch className="cursor-pointer" />
     </div>
</div >

<div className="header ">
  <div className="logo ">
      <p>Cine Spectrum</p> 
   </div>

   <div className="nav_links_mobile ">
       <Link to="/Home"  ><AiOutlineHome /></Link>
      <Link to="/movies"><BiMoviePlay /></Link>
      <Link to="/tvshows"><RiComputerLine /></Link>
    </div>

    <div className="search flex">
        <BiSearch className="cursor-pointer" />
     </div>
</div >

@media (max-width :400px) {

    .header {
        display: grid !important;
        grid-template-areas:
            "logo logo"
            "nav_links_mobile search";
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);


    }

}

@media (max-width :400px) {

    .header {
        display: grid !important;
        grid-template-areas:
            "logo logo"
            "nav_links_mobile search";
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);


    }

}

5 Replies

Mannix•2y ago

you gonna need 4 columns if you want do 3/4 1/4 split 😉

Avinash•2y ago

yeah i tried that too didnt work. This was the code i used

 grid-template-areas:
            "logo logo logo logo"
            "nav_links_mobile nav_links_mobile nav_links_mobile search";
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);

 grid-template-areas:
            "logo logo logo logo"
            "nav_links_mobile nav_links_mobile nav_links_mobile search";
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);

Mannix•2y ago

that should work https://codepen.io/MannixMD/pen/dygLgON

Avinash•2y ago

oh i forgot about assigning area names to the classes

Mannix•2y ago

Gaming

Programming

Help with grid