Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
5 replies
Avinash

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 >


@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);


    }

}
image.png
image.png
Was this page helpful?