3 column with grid and flex

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Sanja, Your solution is good and straightforward. Only, you overcomplicated to round the cards. You can easily round the border by only putting the border-radius on the .grid class & adding overflow: hidden;. As your code will be more simple.

  .grid {
      display: grid;
      grid-template-columns: repeat(3, 300px);
      grid-auto-rows: 500px;
  
      border-radius: 10px;
      overflow: hidden;
  }
  

  Marked as helpful

  1

  ---

  

  Sanja•40

  @sdrenjanPosted over 2 years ago

  @prantiknoor Thank you, I will try it!

  0

  

  Sanja•40

  @sdrenjanPosted over 2 years ago

  @prantiknoor ok I tried it on .grid and it would't round corners at all. Then I tried it of .flex itself (inside .grid) and it rounded left and right card correct, but middle card got all 4 corners rounded. Do you know why this is happening?

  0

  

  Prantik•660

  @prantiknoorPosted over 2 years ago

  @sdrenjan Sorry for the late, Sanja.

  To solve this issue, you only need to remove the padding from .grid;

  1

  

  Sanja•40

  @sdrenjanPosted over 2 years ago

  @prantiknoor Thank you! I don't even remember why I put it there XD

  0