38 lines
1.3 KiB
SCSS
38 lines
1.3 KiB
SCSS
|
.grid { display: flex; flex-wrap: wrap; }
|
||
|
|
.grid.\-top { align-items: flex-start; }
|
||
|
|
.grid.\-middle { align-items: center; }
|
||
|
|
.grid.\-bottom { align-items: flex-end; }
|
||
|
|
.grid.\-stretch { align-items: stretch; }
|
||
|
|
.grid.\-baseline { align-items: baseline; }
|
||
|
|
.grid.\-left { justify-content: flex-start; }
|
||
|
|
.grid.\-center { justify-content: center; }
|
||
|
|
.grid.\-right { justify-content: flex-end; }
|
||
|
|
.grid.\-between { justify-content: space-between; }
|
||
|
|
.grid.\-around { justify-content: space-around; }
|
||
|
|
|
||
|
|
.cell { flex: 1; box-sizing: border-box; }
|
||
|
|
.cell.\-center { text-align: center ;}
|
||
|
|
|
||
|
|
@media screen and (min-width: 600px) {
|
||
|
|
.cell.\-1of12 { flex: 0 0 calc(100% * 1 / 12); }
|
||
|
|
.cell.\-2of12 { flex: 0 0 calc(100% * 2 / 12); }
|
||
|
|
.cell.\-3of12 { flex: 0 0 calc(100% * 3 / 12); }
|
||
|
|
.cell.\-4of12 { flex: 0 0 calc(100% * 4 / 12); }
|
||
|
|
.cell.\-5of12 { flex: 0 0 calc(100% * 5 / 12); }
|
||
|
|
.cell.\-6of12 { flex: 0 0 calc(100% * 6 / 12); }
|
||
|
|
.cell.\-7of12 { flex: 0 0 calc(100% * 7 / 12); }
|
||
|
|
.cell.\-8of12 { flex: 0 0 calc(100% * 8 / 12); }
|
||
|
|
.cell.\-9of12 { flex: 0 0 calc(100% * 9 / 12); }
|
||
|
|
.cell.\-10of12 { flex: 0 0 calc(100% * 10 / 12); }
|
||
|
|
.cell.\-11of12 { flex: 0 0 calc(100% * 11 / 12); }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 600px) {
|
||
|
|
.grid {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.cell {
|
||
|
|
flex: 0 0 auto;
|
||
|
|
}
|
||
|
|
}
|