blob: 935ea251e1fac7d00a8a2147e3dbe923893e112d (
plain) (
blame)
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
63
64
65
66
67
68
69
|
// Name: Grid
// Description: Component to create two dimensional grids
//
// Component: `uk-grid2`
//
// ========================================================================
// Variables
// ========================================================================
$grid-column-xsmall: 100px !default;
$grid-column-small: 200px !default;
$grid-column-medium: 300px !default;
$grid-column-large: 400px !default;
$grid-column-xlarge: 500px !default;
$grid-column-xxlarge: 600px !default;
$grid-gap-small: $global-small-gutter !default;
$grid-gap-medium: $global-gutter !default;
$grid-gap-large: $global-large-gutter !default;
/* ========================================================================
Component: Grid
========================================================================== */
.uk-grid-masonry { display: grid; }
.uk-grid-inline { display: inline-grid; }
/* Columns Width
========================================================================== */
.uk-grid-column-xsmall { grid-template-columns: repeat(auto-fill, minmax($grid-column-xsmall,1fr)); }
.uk-grid-column-small { grid-template-columns: repeat(auto-fill, minmax($grid-column-small,1fr)); }
.uk-grid-column-medium { grid-template-columns: repeat(auto-fill, minmax($grid-column-medium,1fr)); }
.uk-grid-column-large { grid-template-columns: repeat(auto-fill, minmax($grid-column-large,1fr)); }
.uk-grid-column-xlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xlarge,1fr)); }
.uk-grid-column-xxlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xxlarge,1fr)); }
/* Gap
========================================================================== */
.uk-grid-gap-none { grid-gap: 0; }
.uk-grid-gap-small { grid-gap: $grid-gap-small; }
.uk-grid-gap-medium { grid-gap: $grid-gap-medium; }
.uk-grid-gap-large { grid-gap: $grid-gap-large; }
/* Auto Placement
========================================================================== */
// Default
.uk-grid-auto-flow-row { grid-auto-flow: row; }
.uk-grid-auto-flow-column { grid-auto-flow: column; }
.uk-grid-auto-flow-dense { grid-auto-flow: dense; }
/* Item Span
========================================================================== */
// TODO Fix implicit tracks if span is too large
.uk-grid-item-span-2 { grid-column-start: span 2; }
.uk-grid-item-span-3 { grid-column-start: span 3; }
.uk-grid-item-span-4 { grid-column-start: span 4; }
.uk-grid-item-span-5 { grid-column-start: span 5; }
|
