Four card feature section

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 10 months ago

  Hello there 👋. Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  CSS and Styling:

  • You could use grid-template-area to achieve the same result using grid-area

    .card_container {
    	display: grid;
    	grid-template-areas:
    		". team-builder ."
    		"supervisor team-builder calculator"
        "supervisor karma calculator"
    		". karma ."
    	gap: 1rem;
    	margin-top: 2.5rem;
    }
    

    And set the grid-area of each card using a modifier class or something similar

    .card--supervisor {
    	  grid-area: supervisor;
    }
    
    .card--team-builder {
    	  grid-area: team-builder;
    }
    
    .card--karma {
        grid-area: karma;
    }
    
    .card--calculator {
    		grid-area: calculator
    }
    

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1