More actions
GamingTwist (talk | contribs) No edit summary |
GamingTwist (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
.card-grid { | .card-grid { | ||
display: | display: flex; | ||
flex-wrap: wrap; | |||
gap: 1em; | gap: 1em; | ||
justify-content: space-between; | |||
} | } | ||
.card { | .card { | ||
flex: 1 1 calc(33.333% - 1em); /* 3 columns with spacing */ | |||
border- | box-sizing: border-box; | ||
} | |||
/* Adjust for tablets */ | |||
@media (max-width: 768px) { | |||
.card { | |||
flex: 1 1 calc(50% - 1em); /* 2 columns */ | |||
} | |||
} | |||
/* Adjust for mobile */ | |||
@media (max-width: 480px) { | |||
.card { | |||
flex: 1 1 100%; /* 1 column */ | |||
} | |||
} | } |
Revision as of 06:57, 10 December 2024
.card-grid { display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; } .card { flex: 1 1 calc(33.333% - 1em); /* 3 columns with spacing */ box-sizing: border-box; } /* Adjust for tablets */ @media (max-width: 768px) { .card { flex: 1 1 calc(50% - 1em); /* 2 columns */ } } /* Adjust for mobile */ @media (max-width: 480px) { .card { flex: 1 1 100%; /* 1 column */ } }