Kevin Powell - Community•10mo ago

Responsive Card Layout (CSS)

Trying to re-create this card layout. I'd like the cards to wrap when screen size is shrunk. However, I can't seem to get the cards to do so with Flex. (Styling isn't exactly the same, just want to get the responsiveness to work). I tried to use a width of 33% or flex: 33%. How can I achieve this without using media queries or fixed widths? https://codepen.io/Matt-CopOffMatt/pen/eYXbNdX

7 Replies

MattOP•10mo ago

Also, adding say gap: 1rem, it turns the rows into 2 item rather than 3?

MarkBoots•10mo ago

although it might be possible in flex, in this case grid (imo) would make more sense

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}

MattOP•10mo ago

ahh okay, I was thinking I probably should've used grid instead Thank you How come this defaults to 4 columns? or if im understanding correctly, auto-fit will create those columns based on the children? (if so, why are 4 columns made when child card width = 33%?)

MarkBoots•10mo ago

it is creating as much columns that fit (auto-fit) in the container, with a minimum size of 300px in this case. you can adjust that number

MattOP•10mo ago

okay makes sense thank you

clevermissfox•10mo ago

https://youtu.be/LEkFckg7sfw?si=hMxuO5ZTSrWJ6q3k

Kevin Powell

YouTube

Use this instead of media queries or container queries

Media queries are a bit limited in how they work, and while container queries go a really long way in solving a lot of those limitations, there are intrinsic patterns that we can follow that allow us to do things that neither one of them can do. The setup is a bit strange and can look complex, but, in my opinion, it's also 100% worth it! 🔗 Lin...

clevermissfox•10mo ago

This helps if you prefer flex

Gaming

Programming

Responsive Card Layout (CSS)