Single-Price-Grid-Component built with CSS Flexbox and Grid

Community feedback

• 

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  Do it like this:

  .container {
    /* ... */
    grid-template-areas:
      "header header"
      "subscription features";
    /* ... */
  }
  
  .header {
    /* ... */
    grid-area: header;
    /* ... */
  }
  
  .subscription {
    /* ... */
    grid-area: subscription;
    /* ... */
  }
  
  .features {
    /* ... */
    grid-area: features;
    /* ... */
  }
  

  You can read about it on MDN and see the example I put up for you on codepen.

  0

  ---

  

  ChinatuL•370

  @ChinatuLPosted over 2 years ago

  @joaojgabriel Thanks but this was exactly what I tried and it wasn’t working

  0

  

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  @ChinatuL I just did that on your code and it worked. Let me see what it needs to be turned off to work.

  0

  

  ChinatuL•370

  @ChinatuLPosted over 2 years ago

  @joaojgabriel Okay

  0

  

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  @ChinatuL It definitely works. You might've had some typo, because this syntax is tricky. Here's a codepen with your code edited. *Check the changes from line 126 of the CSS.

  Marked as helpful

  0

  

  ChinatuL•370

  @ChinatuLPosted over 2 years ago

  @joaojgabriel Alright. Thanks a lot

  0