This is a solution to the 3-column preview card component challenge on Frontend Mentor.
This project is solely for learning purposes. I take no any responsibility or liability for the accuracy, completeness, or usefulness of any information provided in this project. You should not use it as a reference for creating your project.
I am currently no longer working on this project.
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
- Solution URL: https://www.frontendmentor.io/solutions/3-column-card-component-html5-css3-sass-M2zWirycr
- Live Site URL: https://officialcarrental.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- CSS Flexbox
- Mobile-first workflow
- A Modern CSS Reset - Piccalilli
- BEM (Block, Element, Modifier)
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 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.
- 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!
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.