Four card fature section using pure CSS

Community feedback

• 

  swaraj papadkar•315

  @swaraj70Posted over 4 years ago

  Grid gap will add some space between the 4 cards.

      /* DESKTOP-VIEW */
      @media (min-width: 1400px) {
          .card-container {
              display: grid;
              grid-gap: 30px;
              grid-template-areas: 
              ". a ." 
              "b a c"
              "b d c"
              ". d .";
              width: 80vw;
              margin: 0 auto;   
          }
      }
  

  1
• 

  swaraj papadkar•315

  @swaraj70Posted over 4 years ago

  Hey, the code looks great. Some space between the cards would make it look much better. Try adding grid-gap in .card-container in styles.css file. for example:

      /* GRID-GAP */
      grid-gap: 30px;
  

  1

  ---

  

  Ndonna Ugwuede•170

  @PalmlightPosted over 4 years ago

  @swaraj70 Thanks a lot. Would do that right now

  0

  

  Ndonna Ugwuede•170

  @PalmlightPosted over 4 years ago

  @swaraj70 i just did that but it's scattering my grid layout.

  0