griddery.github.io/basics.css at main · griddery/griddery.github.io · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/*----- griddery v4.0 -----*/
:root, [griddery-container]{
  --Griddery-Column-Width:calc((var(--Griddery-Width) - (var(--Griddery-Gap) * (var(--Griddery-Columns) - 1))) / var(--Griddery-Columns));
}

div[griddery-viewport-watcher]{
  position:fixed;
  top:100vh;left:0;
  width:100vw;
  height:0;
  visibility:hidden;
  z-index:-1;
}

[griddery-container]{
  display:grid;
  width:var(--Griddery-Width);
  grid-template-columns:repeat(var(--Griddery-Columns),1fr);
  align-items:flex-start; /* default to v-align top */
}

[griddery-align-middle],[griddery-align-center]{ align-items:center }
[griddery-align-bottom],[griddery-align-bot]{ align-items:flex-end }

[griddery-column]{
  display:grid;
  grid-auto-rows:min-content; /* just in case */
  min-width:0;
}

[griddery-container], [griddery-column]{
  gap:var(--Griddery-Gap);
}

[griddery-column], [griddery-item]{
  min-width:0;
}

[griddery-item]{
  max-width:100%;
}

/*----- griddery v2.0 + v3.0 -----*/
[griddery-cont]{
  display:table;
  width:100%;
}

[griddery-tr]{
  display:table-row;
}

[griddery-col]{
  display:table-cell;
  vertical-align:top;
}

[griddery-item]{
  display:flex;
  justify-content:center;
}

[griddery-item] > * {
  flex:1;
}

[griddery-item] img,
[griddery-item] iframe,
[griddery-item] figure {
  max-width:100%;
}

/*----- griddery v1.0 -----*/
.col-tr {
  display:table-row;
}

.col-column {
  display:table-cell;
  vertical-align:top;
  width:1%;
}

.col-item {
  display:block;
}