Kevin Powell - Community•13mo 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•13mo ago

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

Avinash•13mo 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•13mo ago

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

Avinash•13mo ago

oh i forgot about assigning area names to the classes

Mannix•13mo ago

Gaming

Programming

Help with grid