ember-slimguide
Version:
A test for bottled-ember
51 lines (40 loc) • 724 B
CSS
/**
* A grid is an equally spaced matrix of items of a common type.
* e.q. a bunch of logos, mascots, cards, etc.
*/
.grid {
--column-count: 1;
display: grid;
grid-template-columns: repeat(var(--column-count), 1fr);
grid-gap: var(--grid-gap-md);
}
.grid > * {
grid-column: span 1;
align-items: stretch;
}
@media (max-width: 1007px) {
.sm\:grid-2 {
--column-count: 2;
}
.sm\:grid-3 {
--column-count: 3;
}
.sm\:grid-4 {
--column-count: 4;
}
}
@media (min-width: 1008px) {
.lg\:grid-2 {
--column-count: 2;
}
.lg\:grid-3 {
--column-count: 3;
}
.lg\:grid-4 {
--column-count: 4;
}
.lg\:grid-5 {
--column-count: 5;
grid-gap: var(--grid-gap-sm);
}
}