Home > Article > Web Front-end > Building Responsive, Equal-Height Cards with Modern CSS (Magic of Flexbox & No Media Queries)
Introduction
What is our aim?
Building the Structure Using Semantic HTML5
Adding the Style Using Modern CSS
- Resetting CSS
- Designing Card Layout with Flexbox
- Styling the Card image
- Styling the Card content
- Styling the Card Button
- Adding Hover Transitions
- Using CSS Variables
Conclusion
As web developers, we often encounter the need to create card components. whether it's for a product/project showcase, user profile, or blog post, cards are everywhere.
In the past, creating responsive layouts was a challenge. The creation of these designs has become significantly simpler and more intuitive due to the advent of modern CSS techniques, specifically CSS Flexbox.
Flexbox simplifies the process of creating responsive layouts. We can easily arrange, align, and space items in a container without using complex media queries. This means we can build layouts that adapt beautifully to different screen sizes and orientations without specifying exact breakpoints.
The aim is to create responsive cards of equal heights without relying on breakpoints by using CSS Flexbox. We will ensure that each card maintains the same height regardless of the content length, adapting seamlessly to different screen sizes.
key CSS properties for the layout:
Now let's explore the magic of CSS flexbox by building the cards!
<main class="card-container"> <!-- First card --> <article class="card"> <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy"> <h2 class="card-title">Title one</h2> <p class="card-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.</p> <button class="card-button" aria-label="Read more about Title one">Read More</button> </article> <!-- Second card --> <article class="card"> <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy"> <h2 class="card-title">Title two</h2> <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.</p> <button class="card-button" aria-label="Read more about Title two">Read More</button> </article> <!-- Third card --> <article class="card"> <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy"> <h2 class="card-title">Title three</h2> <p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!</p> <button class="card-button" aria-label="Read more about Title three">Read More</button> </article> </main>
/* Basic CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; }
/* Ensure that our layout is centred horizontally and vertically on the page */ body { display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */ justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; /* Prevent horizontal scrolling */ }
/* Cards */ .card-container { display: flex; /* using CSS flexbox to display each card at the centre */ justify-content: center; align-items: stretch; /* use stretch for equal height of all cards */ gap: 1.5625rem; /* add space between each card */ flex-wrap: wrap; padding: 1rem; max-width: 100%; /* Prevent container from exceeding viewport width */ } .card { display: flex; flex-direction: column; width: 20rem; background-color: #fff; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4); text-align: center; text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */ overflow: hidden; }
.card-image { width: 100%; height: auto; object-fit: cover; margin-bottom: 0.85rem; }
.card-title { font-size: 1.25rem; padding: 1rem; color: #3ca69f; } .card-description { flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */ padding: 0 1rem 1rem; font-size: 0.975rem; line-height: 1.5; }
/* Cards button */ .card-button { align-self: center; /* placing the button at the center */ margin: 1rem 0 3rem; padding: 0.625rem 1rem; font-size: 1rem; color: #ffffff; background-color: #3ca69f; border: none; border-radius: 0.3125rem; cursor: pointer; }
.card { transition: 0.5s ease all; } .card-button { transition: 0.5s ease all; } /* cards hover effect */ .card:hover { background-color: #276662; color: #ffffff; } .card:hover > .card-button { background-color: #ffffff; color: #276662; font-weight: 700; } .card:hover > .card-title { color: #ffffff; }
/* Declare variables */ :root { --primary-color: #3ca69f; --secondary-color: #276662; --text-color: #ffffff; --shadow-color: rgba(0, 0, 0, 0.4); --border-radius: 0.3125rem; --spacing: 1rem; --transition-duration: 0.5s; }
GO TOP
The above is the detailed content of Building Responsive, Equal-Height Cards with Modern CSS (Magic of Flexbox & No Media Queries). For more information, please follow other related articles on the PHP Chinese website!