Hi! with CSS grid we can easily create a card component in few lines of code and its responsive to let's check it out
Give basic and default stylings(i used SCSS here).after that
in our main container, we give
display: grid;to our main container and specifiying column witdh and count
grid-template-columns: repeat(auto-fit,300px); with row and column gap of
gtc determines the column width for each child of the grid parent. the repeat function repeats the size for each number of columns. I know what you're thinking what is auto-fit? I will explain this later. now we style our cards
Magic... Our card components are ready no more coding. ok now we will learn about autofit
when we mention the number of columns it takes up the width according to the grid container size. now we change the viewport size.
so it is a fixed width. you can change the number columns according to the viewport in media queries
If you want a responsive card component then use auto-fit.
Magic.. and additional there's an auto-fill too here difference between auto-fill and fit. auto-fit vs auto-fill