Frontend Mentor - 3 column preview card component solution

This is a solution to the 3 column preview card component challenge on Frontend Mentor.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Desktop Design

Links

• Live Site URL: 3 column preview card component

Built with

What I learned

During this challenge, I sought to implement responsive design without media queries, and I accomplished this goal. I'm very proud of how I did it, and for that, I used the following resource 👉 @frontend_trend - responsive flex wrap

I have included the code I used below 👇

HTML code

<main>
  <div class="card-container">...</div>
  <div class="card-container">...</div>
  <div class="card-container">...</div>
</main>

CSS code

main {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  min-height: 500px;
  margin: 32px;
  border-radius: 10px;
  overflow: hidden;
}

.card-container {
  flex: 1 1 250px;
  display: grid;
  grid-template-rows: auto auto auto minmax(auto, 100%);
  padding: 40px;
}

Useful resources

There are some awesome instagram channels that help me learn new things about coding and get inspired.

• @frontend_trend.
• @frontendchannels

Connect with me