css-grid/css-grid.scss at master · M1ck0/css-grid · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* FRAMEWORK IN PROGRESS */

// Variables
$content-width: 1340px;
$gap-var: 30px;

// Functions
@function handle-columns($columns) {
  $element-width: calc(calc(#{$content-width}/#{$columns}) - #{$gap-var});
  $grid-template-columns: 0;

  @if $columns == 2 {
    $grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
  }
  @else if $columns == 3 {
    $grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  }
  @else if $columns == 4 {
    $grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  } @else {
    $grid-template-columns: repeat(
      auto-fit,
      minmax(
        min(100%, calc(calc(#{$content-width}/#{$columns}) - #{$gap-var})),
        1fr
      )
    );
  }

  @return $grid-template-columns;
}

// Main code
.grid {
  max-width: $content-width;
  padding: 0 20px;
  margin: 0 auto;

  @for $i from 1 through 12 {
    [class*="grid-layout-#{$i}"] {
      grid-template-columns: handle-columns($i);
    }
  }

  [class*="grid-layout"] {
    display: grid;
    grid-gap: $gap-var;
    margin-bottom: $gap-var;

    &.center-items {
      place-items: center;

      & > * {
        min-height: 10px; // just to ensure that all the elements have min height because place-items: center; doesn't work otherwise
      }
    }

    & > * {
      width: 100%; // make sure that all children have initial width set
    }
  }
}