Commit
+30 -2 +/-1 browse
| 1 | diff --git a/src/props.layouts.css b/src/props.layouts.css |
| 2 | index 990bca4..dda6811 100644 |
| 3 | --- a/src/props.layouts.css |
| 4 | +++ b/src/props.layouts.css |
| 5 | @@ -1,5 +1,33 @@ |
| 6 | :where(html) { |
| 7 | - --grid-stack: [stack] 1fr / [stack] 1fr; |
| 8 | + --grid-cell: [stack] 1fr / [stack] 1fr; |
| 9 | + --grid-cell-name: stack; |
| 10 | + |
| 11 | --grid-ram: repeat(auto-fit, minmax(min(0, 100%), 1fr)); |
| 12 | --grid-holy-grail: auto 1fr auto / auto 1fr auto; |
| 13 | - } |
| 14 | \ No newline at end of file |
| 15 | + } |
| 16 | + |
| 17 | + * { |
| 18 | + --grid_adapt_mixin-viewport_context: 100vw; |
| 19 | + --grid_adapt_mixin-container_context: 100%; |
| 20 | + --grid_adapt_mixin-context: var(--grid_adapt_mixin-viewport_context); |
| 21 | + |
| 22 | + --grid_adapt_mixin-break_1: 1024px; |
| 23 | + --above-break_1-columns: 5; |
| 24 | + --grid_adapt_mixin-break_2: 480px; |
| 25 | + --above-break_2-columns: 2; |
| 26 | + |
| 27 | + --grid_adapt_mixin: repeat(auto-fill, |
| 28 | + minmax( |
| 29 | + clamp( |
| 30 | + clamp( |
| 31 | + calc(100% / calc(var(--above-break_1-columns) + 1) + 0.1%), |
| 32 | + calc(calc(var(--grid_adapt_mixin-break_1) - var(--grid_adapt_mixin-context)) * 1e5), |
| 33 | + calc(100% / calc(var(--above-break_2-columns) + 1) + 0.1%) |
| 34 | + ), |
| 35 | + calc(calc(var(--grid_adapt_mixin-break_2) - var(--grid_adapt_mixin-context)) * 1e5), |
| 36 | + 100% |
| 37 | + ), |
| 38 | + 1fr) |
| 39 | + ); |
| 40 | + } |
| 41 | + |