Four-card

Community feedback

• 

  Bakhtiar•380

  @b4khtiarPosted 5 months ago

  to layout the cards you can use grid on your "four-card-container", set it to 3 columns and 4 rows, then position your div to specific area, for example:

  .four-card-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
  }
  
  .one { 
      grid-area: 2 / 1 / 4 / 2; 
  }
  .two { 
      grid-area: 1 / 2 / 3 / 3; 
  }
  .three { 
      grid-area: 3 / 2 / 5 / 3; 
  }
  .four { 
      grid-area: 2 / 3 / 4 / 4; 
  } 
  

  This is one of many way you can use.

  0