basegrid/basegrid.css at master · okydk/basegrid · 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
:root {
	--gw: 940px;
	--gg: 20px;
	--gc: 12;
	--gr: auto;
	--x: auto;
	--y: auto;
	--w: auto;
	--h: auto;
}
.basegrid {
	width: var(--gw);
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--gc), 1fr);
	grid-gap: var(--gg);
	grid-auto-rows: var(--gr);
	grid-auto-flow: row dense;
}
.basegrid > div {
	grid-column: var(--x) / span var(--w);
	grid-row: var(--y) / span var(--h);
}
.basegrid.fixed {
	grid-auto-rows: calc((var(--gw) + var(--gg)) / var(--gc) - var(--gg));
}
.basegrid.expand {
	grid-auto-rows: minmax(calc((var(--gw) + var(--gg)) / var(--gc) - var(--gg)), max-content);
}
@media screen and (max-width: 940px) {
	.basegrid.res {
		--gw: 100vw !important;
		grid-auto-rows: none;
	}
}
@media screen and (max-width: 600px) {
	.basegrid.res {
		display: block;
	}
}