@lucsoft/webgen
Version:
Collection of lucsofts Components
44 lines (41 loc) • 921 B
CSS
grid {
max-width: var(--max-width);
margin: var(--gap) auto;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
}
card {
box-shadow: var(--background-card);
border-radius: var(--border-radius);
background: var(--background-card);
backdrop-filter: var(--backdrop-filter);
color: var(--on-card-text);
font-family: var(--font);
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
}
@media(max-width: 520px) {
grid {
grid-template-columns: 1fr;
grid-auto-rows: unset;
}
:root {
--gap: .8rem;
--card-min-width: 16rem;
}
grid card {
grid-column: span 1;
}
}
@media(max-width: 420px) {
grid {
grid-template-columns: 1fr;
}
:root {
--gap: .5rem;
--card-min-width: 14rem;
}
}