This guide teaches you
to build a single product card component
that automatically adjusts its look based on its width,
using container queries.
This replaces the need for two separate components.
We will use
auto-fill for layout control and container queries for component adjustments,
the perfect combination.
In this example, I utilised Gumroad's product cards, which are available in two different sizes: small and large, each using distinct font sizes. This makes them a suitable choice for our demonstration.
Although they don't offer a product card that can switch between portrait and landscape orientations, I've enhanced our version with a container query to handle this potential scenario.
Product card component
I'll talk through the code used to create the layout of the card, I won't go into the details of all the bits and pieces (e.g. the flag).
Container queries are essential when you want to design self-sufficient components that can modify their layout. It is vital to enclose the component in an element because a container cannot query itself; it can only query its children.
For the example,
I wrapped the component in an
<article /> HTML element
and assigned it a
In our setup, we have two main container queries:
Font size adjustment
The initial query alters the font size of all
<p/> elements according to the container's width. Currently, the query width is set to
0, but for a finer approach, for instance if I was implementing this for Gumroad, you could establish a default width and then modify it through the container query settings.
This is managed by the second container query, highlighted below.
Always test the effectiveness of using
cqw units for
font-size by zooming (using ctrl + / -).
The only other layout change is the footer.
The units I've used are arbitrary,
32.8125rem just came about by resizing the window
and seeing how many cards I can fit onto a single row.
8cqw came about by seeing what sizes the text was at different screen widths,
you can get more granular if you want.
That's all there is to the CSS for three card components using container queries 🚀.
Controlling the layout
All the cards will look identical until they are applied to a grid, so there are a few more lines of code to write!
For our product card layouts,
it's better to use
auto-fill rather than
auto-fill ensures that cards only take up necessary space
and don't stretch to fill extra columns,
preserving the distinct appearance of each card.
auto-fit would stretch the cards to fit, occupying all available space,
which is not desirable in this scenario
as we want each card to maintain its unique look.
auto-fill also ensures
images aren't blurry because they've been allowed to grow too large.
This works especially well with the bigger product cards, which would be huge without any measures in place to restrict their width.
In this guide, I showcased how just a small amount of code can yield a wide range of variations,
leveraging the capabilities of CSS Grid,
auto-fill, and container queries.
I illustrated the influence of width on container queries and explained how a basic card component can function independently of its environment. Although one scenario might seem a bit fabricated, it was necessary to provide a worthy demonstration 😄.
If you have any suggestions as to how the examples can be made clearer, easier to understand, or how I can add any missing use-cases you feel would help others, I'd love nothing more than to hear from you! Reach out to me on Twitter, or shoot me an email.
Written by Morgan Feeney
I’ve been designing and developing for almost 2 decades.
Read about me, and my work.
For juicy tips and exclusive content, subscribe to my FREE newsletter.