Four card feature section

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @BenjaminNicholasWells, some suggestions to improve you code:

  • You can improve on this section of code:

  Currently:

    .four-card-container {
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(4, 1fr);
          grid-template-areas: 
          "..... card2 ....."
          "card1 card2 card4"
          "card1 card3 card4"
          "..... card3 ....."
          ;
      }
  
      .card1 {
          grid-area: card1;
      }
      
      .card2 {
          grid-area: card2;
      }
      
      .card3 {
          grid-area: card3;
      }
      
      .card4 {
          grid-area: card4;
      }
  

  Updated:

    .four-card-container {
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-template-areas: 
         
          "card1 card2 card4"
          "card1 card3 card4"
        
          ;
      }
  
      .card1 {
          grid-area: card1;
          align-self: center 
      }
      
      .card2 {
          grid-area: card2;
      }
      
      .card3 {
          grid-area: card3;
      }
      
      .card4 {
          grid-area: card4;
           align-self: center 
      }
  

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Benjamin Nicholas Wells•230

  @BenjaminNicholasWellsPosted about 2 years ago

  @vcarames thanks for the input; is there any particular reason why this code is an improvement besides writing less code? I kind of prefer the explicit grid so that it is clearer to anyone looking at the code.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @BenjaminNicholasWells

  Your code works great. But the less code you use, the better when it comes to coding.

  As you get into building larger challenges, the less code you use, the faster your content will load (especially on mobile devices).

  0