resources/assets/stylesheets/scss/grid.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

$grid-gap: 15px; // 10px would lead to fitting 4 columns on a default 1440px wide screen
$grid-element-width: 270px;

.studip-grid {
    // $header-padding: 2px;
    // $padding: 5px;
    // $header-size: 80px;
    // $element-height: (100px + $header-size);

    display: grid;
    grid-template-columns: repeat(auto-fill, $grid-element-width);
    grid-template-rows: repeat(auto-fit, max-content);
    grid-gap: $grid-gap;
}

.studip-grid-element {
    border: 1px solid var(--color--tile-border);
}

// Responsive displays
@include media-breakpoint-small-down {
    .studip-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@include media-breakpoint-tiny-down {
    .studip-grid {
        grid-template-columns: 100%;
    }
}