3-column preview card component

Community feedback

• 

  Thomas Burette•190

  @tburette

  Posted over 1 year ago

  Nice solution. You used place-content which I didn't know about. It is a shorthand property for align-content and justify-content.

  There is a smooth transition when the breakpoint is it : the vertical space between the items within each of the three cards smoothly increase/decrease. I looked at the code and it is caused by :

  .button {
    transition: all 0.4s;
  }
  

  At first I didn't understand why transition: on a button affect the space between the items of a grid. By fiddling around I realized it is the margin-top property of the button which transitions.

  There is a bunch of CSS that is unused in the final solution : in .button {} there are two border:. .orange{}, .green{}, .cyan{} are unused,..

  01

  Marked as helpful