1 | :where(html) {
|
2 | --grid-cell: [stack] 1fr / [stack] 1fr;
|
3 | --grid-cell-name: stack;
|
4 |
|
5 | --grid-ram: repeat(auto-fit, minmax(min(0, 100%), 1fr));
|
6 | --grid-holy-grail: auto 1fr auto / auto 1fr auto;
|
7 | }
|
8 |
|
9 | * {
|
10 | --grid_adapt_mixin-viewport_context: 100vw;
|
11 | --grid_adapt_mixin-container_context: 100%;
|
12 | --grid_adapt_mixin-context: var(--grid_adapt_mixin-viewport_context);
|
13 |
|
14 | --grid_adapt_mixin-break_1: 1024px;
|
15 | --above-break_1-columns: 5;
|
16 | --grid_adapt_mixin-break_2: 480px;
|
17 | --above-break_2-columns: 2;
|
18 |
|
19 | --grid_adapt_mixin: repeat(auto-fill,
|
20 | minmax(
|
21 | clamp(
|
22 | clamp(
|
23 | calc(100% / calc(var(--above-break_1-columns) + 1) + 0.1%),
|
24 | calc(calc(var(--grid_adapt_mixin-break_1) - var(--grid_adapt_mixin-context)) * 1e5),
|
25 | calc(100% / calc(var(--above-break_2-columns) + 1) + 0.1%)
|
26 | ),
|
27 | calc(calc(var(--grid_adapt_mixin-break_2) - var(--grid_adapt_mixin-context)) * 1e5),
|
28 | 100%
|
29 | ),
|
30 | 1fr)
|
31 | );
|
32 | }
|
33 |
|