3 ms·
I think my favorite use of display:grid is being able to "visually" see how many columns I'm using on every media query as opposed to trying to do mental divisi
by trinovantes 5y ago
I think my favorite use of display:grid is being able to "visually" see how many columns I'm using on every media query as opposed to trying to do mental division on multiples of 12 (xl-col-2 lg-col-3 md-col-4 sm-col-6 col-12)
.parent {
grid-template-columns: 1fr;
display: grid;
@media (min-width: $breakpoint-sm-min) {
grid-template-columns: 1fr 1fr;
}
@media (min-width: $breakpoint-md-min) {
grid-template-columns: 1fr 1fr 1fr;
}
@media (min-width: $breakpoint-lg-min) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (min-width: $breakpoint-xl-min) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}