basic stuff

Community feedback

• 

  imad•3,330

  @imadvvPosted over 2 years ago

  Greetings jake! Congratulations on completing this challenge!, it's actually pretty easy if you start with Mobile First and scale things up as needed, I make this changes to you code to make it start with mobile version first.

   .main-grid {
      display: grid;
      /* grid-template-columns: 1fr 1fr 1fr 1fr;  start with 1fr and no rows */
      /* grid-template-rows: 1fr 1fr; */
      grid-template-columns: 1fr;
      grid-gap: 25px;
      /* height: 575px;  remove hard coded height*/
      /* width: 1200px; change to max-width and add some padding */
      position: relative;
      max-width: 1200px;
      padding: 2rem 1rem;
    }
  
    #grid-item-1 {
      /* grid-column: 1 / 3; */
      /* grid-row: 1 / 2; */
    }
    
    #grid-item-2 {
      /* grid-column: 3 / 4; */
      /* grid-row: 1 / 2; */
    }
  
    #grid-item-3 {
      /* grid-column: 4 / 5; */
      /* grid-row: 1 / 3; */
    }
  
    #grid-item-4 {
      /* grid-column: 1 / 2; */
      /* grid-row: 2 / 3; */
      
    }
  
    #grid-item-5 {
      /* grid-column: 2 / 4; */
      /* grid-row: 2 / 3; */
    }
  
  /* and then add media query at break points that need change for example here 50rem */
  
    @media (min-width:50rem) {
      .main-grid {
          grid-template-columns: 1fr 1fr 1fr 1fr;
          grid-template-rows: 1fr 1fr;
        } 
  
        #grid-item-1 {
          grid-column: 1 / 3;
          grid-row: 1 / 2;
        }
    
        #grid-item-2 {
          grid-column: 3 / 4;
          grid-row: 1 / 2;
        }
      
        #grid-item-3 {
          grid-column: 4 / 5;
          grid-row: 1 / 3;
        }
      
        #grid-item-4 {
          grid-column: 1 / 2;
          grid-row: 2 / 3;
        }
      
        #grid-item-5 {
          grid-column: 2 / 4;
          grid-row: 2 / 3;
        }
         
  }
  
  

  Hope this help!! Keep up the good work

  Marked as helpful

  0