Four card feature section

Community feedback

• 

  Adán Estévez•320

  @rafdidactPosted almost 2 years ago

  Hey, Daniel!

  You could use Grid CSS to achieve this type of layout. Assign a grid-area to each one of your modals and then specify their position in a div element that wraps them all four with a grid-template-areas property. Use dots for spaces.

  Like so:

  .modal-wrapper {
    grid-template-areas:
    ". b ."
    "a b d"
    "a c d"
    ". c .";
  }
  
  .modal.light-blue {
    grid-area: a;
  }
  
  .modal.red {
    grid-area: b;
  }
  
  .modal.yellow {
    grid-area: c;
  }
  
  .modal.blue {
    grid-area: d;
  }
  

  You can also check my solution's code for reference. Hope it helps.

  Marked as helpful

  2
• 

  Mikhail•60

  @MixxyesPosted almost 2 years ago

  You could use the grid-row and grid-columns properties for child elements also to specify their position in parent grid element.

  Like so:

      .card_wrapper {
          display: grid;
          grid-template-columns: 1fr 300px 1fr;
          grid-template-rows: 1fr 1fr;
          grid-gap: 2rem;
       }
      .card:first-child, .card:last-child {
          grid-row: 1/3;
      }
      .card:last-child {
          grid-column: 3/4;
      }
      .card:first-child {
          justify-self: flex-end;
      }
  

  Hope it was helpful.

  0