Four card feature section in CSS Grid

Community feedback

• 

  Martin Eliáš•890

  @martinelias1312Posted almost 3 years ago

  Hello @ruuendigital, i have done it like this E.g.:

  @media screen and ( min-width:1300px ) {
      .cards-wrapper {
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
      }
  
      #card-supervisor {
          grid-row: 2 / 4;
      }
  
      #card-team_builder {
          grid-area: 1 / 2 / 3 / 3;
      }
  
      #card-karma {
          grid-area: 3 / 2 / 5 / 3; 
      }
      
      #card-calculator {
          grid-area: 2 / 3 / 4 / 4;
      }
  }
  

  My solution link.

  Marked as helpful

  1

  ---

  

  Max Ruuen•290

  @ruuenPosted almost 3 years ago

  @smradupan Thanks Martin! Appreciate your feedback, I'm going to play around with using column/row start & end values in my grid-area declarations as you've done here to get my head around it.

  I also really like your decision to handle the cards in a 2x2 grid on the tablet/small desktop layout before expanding it to the full layout - looks very clean!

  0