picocss/scss/layout/_grid.scss
2024-02-18 11:52:51 +07:00

40 lines
1 KiB
SCSS

@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/grid") and $enable-classes {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
display: grid;
grid-template-columns: 1fr;
// Reset margin bottom for form elements on small screens
@if map.get($modules, "forms/basics") {
@media (max-width: calc(#{map.get(map.get($breakpoints, "md"), "breakpoint")} - 1px)) {
input:not([type="checkbox"], [type="radio"]),
select,
textarea,
fieldset,
fieldset legend,
label {
margin-bottom: 0;
}
}
}
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for childs in overflow
}
}
}