histoiredunpied/assets/css/grid.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;
}
}