All comments

• 

  P

  Daniel Garcia•400

  @dgarcia1724Submitted almost 2 years ago

  How to fix grid layout to match solution?

  

  Four card feature section

  2

  30
  

  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