Frontend Mentor - Four card feature section solution

This is a solution to the Four card feature section challenge on Frontend Mentor.

Table of contents

• Overview

  • Screenshot
  • Links

• My process

  • Built with
  • What I learned
  • Continued development

• Author

Overview

Screenshot

Links

• Solution
• Live

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Responsive Design
• Google Fonts (Poppins)

What I learned

This project was my first hands-on experience using CSS Grid to build a non-uniform card layout. While I'm already comfortable with Flexbox, Grid helped me position elements in two dimensions much more effectively.

Used CSS Grid to create the staggered desktop layout while switching to a single-column layout for smaller screens:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 2rem;
}

@media (max-width:48rem) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .supervisor,
    .team,
    .karma,
    .calculator {
        grid-row: auto;
        grid-column: auto;
    }
}

Used Flexbox inside each card to keep the icon aligned at the bottom without relying on absolute positioning:

.card {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1.3;
    padding: 2rem;
}

.card img {
    align-self: flex-end;
    margin-top: auto;
}

Learned how the aspect-ratio property can control an element's proportions while allowing the Grid to determine its width:

.card {
    aspect-ratio: 1.3;
}

Also practiced using modern CSS functions like min() to improve responsive text width:

.content p {
    width: min(100%, 550px);
}

Continued development

• Continue practicing CSS Grid through more Frontend Mentor challenges until it feels as natural as Flexbox.
• Learn multiple ways to solve the same layout using both Flexbox and Grid to understand when each is the better choice.
• Improve responsive design techniques for more complex layouts.
• Continue building a strong foundation before moving on to larger React projects.

Author

• Frontend Mentor - @bangarukondabollapally
• GitHub - @bangarukondabollapally