flex-grid.css

.flex-grid{display:flex;flex-flow:row wrap;align-items:stretch;margin-right:-0.5rem;margin-left:-0.5rem}.flex-grid>.cell{margin-bottom:1rem;padding-right:.5rem;padding-left:.5rem}.flex-grid>.cell{flex:0 0 auto;width:100%}.flex-grid>.cell.xxs-1{flex:0 0 auto;width:100%}.flex-grid>.cell.xxs-2{flex:0 0 auto;width:calc(100% / 2)}.flex-grid>.cell.xxs-grow{flex:1 1 auto;width:auto}.flex-grid>.cell.xxs-shrink{flex:0 0 auto;width:auto}@media(min-width: 420px){.flex-grid>.cell.xs-1{flex:0 0 auto;width:100%}.flex-grid>.cell.xs-2{flex:0 0 auto;width:calc(100% / 2)}.flex-grid>.cell.xs-3{flex:0 0 auto;width:calc(100% / 3)}.flex-grid>.cell.xs-3-2{flex:0 0 auto;width:calc((100% / 3) * 2)}.flex-grid>.cell.xs-grow{flex:1 1 auto;width:auto}.flex-grid>.cell.xs-shrink{flex:0 0 auto;width:auto}}@media(min-width: 640px){.flex-grid>.cell.sm-1{flex:0 0 auto;width:100%}.flex-grid>.cell.sm-2{flex:0 0 auto;width:calc(100% / 2)}.flex-grid>.cell.sm-3{flex:0 0 auto;width:calc(100% / 3)}.flex-grid>.cell.sm-3-2{flex:0 0 auto;width:calc((100% / 3) * 2)}.flex-grid>.cell.sm-grow{flex:1 1 auto;width:auto}.flex-grid>.cell.sm-shrink{flex:0 0 auto;width:auto}}@media(min-width: 768px){.flex-grid>.cell.md-1{flex:0 0 auto;width:100%}.flex-grid>.cell.md-2{flex:0 0 auto;width:calc(100% / 2)}.flex-grid>.cell.md-3{flex:0 0 auto;width:calc(100% / 3)}.flex-grid>.cell.md-3-2{flex:0 0 auto;width:calc((100% / 3) * 2)}.flex-grid>.cell.md-4{flex:0 0 auto;width:calc(100% / 4)}.flex-grid>.cell.md-4-2{flex:0 0 auto;width:calc((100% / 4) * 2)}.flex-grid>.cell.md-4-3{flex:0 0 auto;width:calc((100% / 4) * 3)}.flex-grid>.cell.md-grow{flex:1 1 auto;width:auto}.flex-grid>.cell.md-shrink{flex:0 0 auto;width:auto}}@media(min-width: 1024px){.flex-grid>.cell.lg-1{flex:0 0 auto;width:100%}.flex-grid>.cell.lg-2{flex:0 0 auto;width:calc(100% / 2)}.flex-grid>.cell.lg-3{flex:0 0 auto;width:calc(100% / 3)}.flex-grid>.cell.lg-3-2{flex:0 0 auto;width:calc((100% / 3) * 2)}.flex-grid>.cell.lg-4{flex:0 0 auto;width:calc(100% / 4)}.flex-grid>.cell.lg-4-2{flex:0 0 auto;width:calc((100% / 4) * 2)}.flex-grid>.cell.lg-4-3{flex:0 0 auto;width:calc((100% / 4) * 3)}.flex-grid>.cell.lg-grow{flex:1 1 auto;width:auto}.flex-grid>.cell.lg-shrink{flex:0 0 auto;width:auto}}@media(min-width: 1440px){.flex-grid>.cell.xl-1{flex:0 0 auto;width:100%}.flex-grid>.cell.xl-2{flex:0 0 auto;width:calc(100% / 2)}.flex-grid>.cell.xl-3{flex:0 0 auto;width:calc(100% / 3)}.flex-grid>.cell.xl-3-2{flex:0 0 auto;width:calc((100% / 3) * 2)}.flex-grid>.cell.xl-4{flex:0 0 auto;width:calc(100% / 4)}.flex-grid>.cell.xl-4-2{flex:0 0 auto;width:calc((100% / 4) * 2)}.flex-grid>.cell.xl-4-3{flex:0 0 auto;width:calc((100% / 4) * 3)}.flex-grid>.cell.xl-5{flex:0 0 auto;width:calc(100% / 5)}.flex-grid>.cell.xl-5-2{flex:0 0 auto;width:calc((100% / 5) * 2)}.flex-grid>.cell.xl-5-3{flex:0 0 auto;width:calc((100% / 5) * 3)}.flex-grid>.cell.xl-5-4{flex:0 0 auto;width:calc((100% / 5) * 4)}.flex-grid>.cell.xl-grow{flex:1 1 auto;width:auto}.flex-grid>.cell.xl-shrink{flex:0 0 auto;width:auto}}