src/components/molecules/grid/grid.module.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.wrapper {
  display: grid;
  gap: var(--gap);

  &--align-items-center {
    align-items: center;
  }

  &--align-items-start {
    align-items: start;
  }

  &--align-items-end {
    align-items: end;
  }

  &--is-centered {
    place-content: center;
  }

  &--has-fixed-size {
    grid-template-columns: repeat(
      var(--col, auto-fit),
      min(100vw - (var(--spacing-md) * 2), var(--size))
    );
  }

  &--has-min-size {
    grid-template-columns: repeat(
      var(--col, auto-fit),
      minmax(
        min(100vw - (var(--spacing-md) * 2), var(--size-min)),
        var(--size-max, 1fr)
      )
    );
  }

  &:not(#{&}--has-fixed-size):not(#{&}--has-min-size) {
    grid-template-columns: repeat(
      var(--col, auto-fit),
      minmax(0, var(--size-max, 1fr))
    );
  }
}