My first Junior Challenge

Community feedback

• 

  Aimade•230

  @aimdexterPosted over 3 years ago

  hey @Anderson Vallejo i made some changes to your code you can check it out :

  1. Live

  2. code

  3. changes : ```@media (min-width: 1440px) {

  .container__cards {

  display: grid;
  
  column-gap: 20px;
  
  grid-auto-flow: dense;
  
  grid-template-columns: repeat(4, 1fr);
  
  grid-template-rows: repeat(2, 1fr);
  
  width: 70%;
  

  }

  .card--color-violet {

  grid-area: 1/1/2/3;
  

  }

  .card--color-grayblue {

  grid-area: 1/3/2/4;
  

  }

  .card--color-white {

  grid-area: 1/4/3/5;
  

  }

  .card--color-white1 {

  grid-area: 2/1/3/2;
  

  }

  .card--color-blackblue {

  grid-area: 2/2/3/4;
  

  }

  } ```

  4. I added a new class '.card--color-white1' both in the html file and css.

  Marked as helpful

  2

  ---

  

  Anderson Vallejo•320

  @VallejoandersonPosted over 3 years ago

  @aimdexter Hi, Almada, very useful solution without using grid-template-areas. It helps me a lot to see multiple solutions for the same problem, greetings and happy coding!

  1
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Look into Grid-template-areas they should help to solve your problems being able to easy rearrange the cards https://www.smashingmagazine.com/understanding-css-grid-template-areas/

  Marked as helpful

  1

  ---

  

  Anderson Vallejo•320

  @VallejoandersonPosted over 3 years ago

  @palgramming Hi, Patrick, thanks for your comment and help. I've added a media queary with a grid-template-area for the case 1410px or more, greetings!

  0