CSS Grid

Community feedback

• 

  Rafael Maia Chieregatto•320

  @rafaelmaiachPosted almost 5 years ago

  Hey Shariar, congrats on your solution.

  As a feedback, check the font for the title, as it is still different from the challenge.

  Talking about the question you made, you can take a look at CSS Grid. With CSS Grid, you can define some areas and place your boxes inside those areas, or you can use the grid layout (rows and columns) to place the boxes starting from a specific row/column. This way you will be able to position the boxes and create that challenge effect.

  For example:

  .card-div {
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(3, 1fr);
  }
  
  .supervisor {
      grid-row: 2/4;
      grid-column: 1;
  }
  
  .team-builder {
     grid-row: 1/3;
     grid-column: 2;
  }
  
  .karma {
      grid-row: 3/5;
      grid-column: 2;
  }
  
  .calculator {
      grid-row: 2/4;
      grid-column: 3;
  }
  

  1

  ---

  

  Shahriar Swim•100

  @swimshahriarPosted almost 5 years ago

  @rafaelmaiach Thank you for your feedback. I will try to fix it.

  0