Make cards responsive without CSS media queries | The Dev Tool |

To make the cards responsive without media queries you can add these two lines of codes to the parent element

display: grid;  
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

Example: We currently have 3 columns (in this case each column has a width of 300px or more). When we shrink the page width we get to a point where all three columns (with 300px width) won't fit to the page, so the coumns will automatically reduce to 2 columns and the rest of the space will be filled with the cards.

This helps us create cool responsive cards without CSS media queris.

Created by: elvis



        Created by: elvis</p>
This page is only partially working without JavaScript. It will show content, but the tools and interactivity cannot be shown without JavaScript enabled. Please enable JavaScript for this page. About Us