Submitted almost 3 years ago

4 card feauture

@echoturnbull

A solution to the Four card feature section challenge

Solution retrospective

I had a lot of trouble with the web page layout. I could not figure out what i needed to do to lay the page out ion the same fashion as the design.

If anyone could give me some guidance, that would be amazing.

Cheers!

Code

Please log in to post a comment

Community feedback

Account deletedPosted almost 3 years ago

Hey @echoturnbull, some suggestions to improve you code:

Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout. Not only will it reduce the amount of code needed but give you full control of the layout.

.card-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "supervisor team calculator"
      "supervisor karma calculator";
  }

  .karma-card {
    grid-area: karma;
  }

  .calculator-card {
    grid-area: calculator;
    align-self: center;
  }

  .team-card {
    grid-area: team;
  }

  .supervisor-card {
    grid-area: supervisor;
    align-self: center;
  }

Happy Coding! 👻🎃

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord