All comments

• 

  P

  Daniel Garcia• 400

  @dgarcia1724

  Submitted over 1 year ago

  How to fix grid layout to match solution?

  

  Four card feature section

  2

  30

  

  Mikhail• 60

  @Mixxyes

  Posted over 1 year 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