3-column preview card component solution - Frontend Mentor

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

The challenge

Users should be able to:

View the optimal layout depending on their device's screen size
See hover states for interactive elements
See visible focus states for interactive elements when navigating by keyboard
Navigate page content while using assistive technology
Understand page content while using assistive technology

Explore this project

Solution URL: https://www.frontendmentor.io/solutions/3-column-card-component-html5-css3-sass-M2zWirycr
Live Site URL: https://officialcarrental.netlify.app/

Built with

Semantic HTML5 markup
CSS custom properties
CSS Flexbox
Mobile-first workflow
A Modern CSS Reset - Piccalilli
BEM (Block, Element, Modifier)

The Flexbox Holy Albatross

I learned that it is possible to create this website without any media queries.

These lines of the CSS make it possible.

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 57.5rem;
}

.container__card {
  flex-basis: clamp(33.33%, calc((46.5625rem - 100%) * 999), 100%);
}

This is the magic of modern CSS!

I will explain those lines of CSS.

So, for the styling of the .container, I made it a flex container by setting display: flex. Then, I used flex-wrap: wrap to make the child elements adapt through different sizes of the flex container. Lastly, I set max-width: 57.5rem to limit the width of the .container while still allowing it to shrink if ever needed.

Now, for the styling of the .container__card, this is where the magic happens. I used clamp() function to set the minimum, ideal, and maximum values for the width of the cards. So, the minimum width for the card is 33.33% width of the container. For the maximum value, I set it to 100% so that when the card is in one-column layout, those cards will fill the entire container.

The calculation of the ideal size can be expressed something like this:

If the flex container width is less than 46.5625rem (745px) then it will return a positive value. For example, if the flex container is 500px width then calculation would be (745px - 500px) * 999 = 244755px. So, it is bigger than the size of the container. As a result, it would be following the maximum allowed value which is 100% width of the container.
On the other hand, if the flex container width is greater than 46.5625rem (745px) then it will return a negative value. For example, if the flex container is 800px width then calculation would be (745px - 800px) * 999 = -54945px. As a result, it would be following the minimum allowed value which is 33.33% width of the container.

So, you could think of this as the true or false value in CSS. 🙂

By the way, the flex-basis: clamp(33.33%, calc((46.5625rem - 100%) * 999), 100%); can be written as the following:

.container__card {
  width: calc((46.5625rem - 100%) * 999);
  min-width: 33.33%;
  max-width: 100%;
}

The Flexbox Holy Albatross Reincarnated

The code is getting updated.

.container__card {
  flex-grow: 1;
  flex-basis: calc((46.5625rem - 100%) * 999);
}

Now, there's no need for max-width and min-width. The flex-grow: 1 will ensure that the cards will always try to fill the entire container.

Useful resources

Heydon Pickering | Flexbox Holy Albatross | CSS Day 2019 - YouTube - This helped me for making the website responsive without media queries. I liked this pattern and will use it going forward.
The Flexbox Holy Albatross: HeydonWorks
The Flexbox Holy Albatross Reincarnated: HeydonWorks
Complex conditional width using flex-basis with clamp: Every Layout - This has nothing to do with the development process. But, this is an amazing article that shows the power of modern CSS!

About me

At Frontend Mentor, I have completed over 30 projects and written over 1500 code reviews. I am also one of the top 10 developers on the All Time Wall of Fame.

I write things on my personal website—Greetings! You Have Accessed Vanza Setia’s Website.

License

MIT

vanzasetia / 3-columns-card-component