mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 11:16:15 -04:00
New: Variable grid columns without changing default functionality
See https://github.com/picocss/pico/discussions/582
This commit is contained in:
parent
1039a4788d
commit
361c14a806
1 changed files with 27 additions and 1 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue