New: Variable grid columns without changing default functionality

See https://github.com/picocss/pico/discussions/582
This commit is contained in:
ethanpil 2025-04-17 19:20:41 -07:00 committed by GitHub
parent 1039a4788d
commit 361c14a806
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -18,9 +18,35 @@
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for children in overflow
}
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
grid-template-columns: repeat(6, 1fr);
}
.grid-8 {
grid-template-columns: repeat(8, 1fr);
}
@if map.get($breakpoints, "md") {
@media only screen and (max-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
.grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-8 {
grid-template-columns: repeat(1, 1fr);
}
}
}
}