Responsive Four card

Community feedback

• 

  P

  j5•2,290

  @jmnyaregaPosted about 3 years ago

  Hi @ddaniel27.

  • You are on the right path, you can use grid-template-areas to make the solution more elegant. On the design, we have 4 cards, supervisor, team-builder, 'calculator' and karma. Grid areas allow us to create layouts visually in our code, check this out.

  display: grid;
  grid-gap: 1rem; // some spacing between cards
  grid-template-areas:
       'supervisor   team-builder   calculator'
       'supervisor    karma             calculator';
  }
  

  Now centre supervisor and calculator vertically:

  .supervisor, .calculator { align-self: center; }

  And that's it. 🙂

  Marked as helpful

  1

  ---

  

  Daniel•280

  @ddaniel27Posted about 3 years ago

  @jmnyarega Thanks for your feedback, I really appreciate it. I didn't know about grid areas. I'll take your tips in count next time! :)

  1