flexbox-grid/grid.css at master · jwdsign/flexbox-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
:root {
/*grid configuration*/
--columns: 12;
--margin: 12px;
--maxwidth: 40em;
--multiplier: calc( var(--maxwidth) - 100%); /*this is your breakpoint without media queries */
}

.grid-container{
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--margin) * -1); /* excess margin removed */
}

.grid-container + .grid-container{
  margin-top: var(--margin);
}

.grid-container > * {
  max-width: 100%;
  flex-basis: calc(var(--multiplier) * 999);
  margin: var(--margin);
}

/* grid items */
.grid-1 > *, .columns-1{--span:1;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-2 > *, .columns-2{--span:2;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-3 > *, .columns-3{--span:3;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-4 > *, .columns-4{--span:4;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-5 > *, .columns-5{--span:5;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-6 > *, .columns-6{--span:6;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-7 > *, .columns-7{--span:7;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-8 > *, .columns-8{--span:8;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-9 > *, .columns-9{--span:9;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-10 > *, .columns-10{--span:10;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-11 > *, .columns-11{--span:11;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
.grid-12 > *, .columns-12{--span:12;--column: calc( 100% / var(--columns) * var(--span) );min-width: calc( var(--column) - (var(--margin) * 2));}
/*add more items to your liking*/