Example grid system mixin // input .grid{ .row; &__col{ .col(12, sm, 6, md, 4, lg, 3); } } // output .grid { margin-left: -15px; margin-right: -15px; display: flex; flex-flow: row wrap; } .grid__col { word-wrap: break-word; box-sizing: border-box; margin-left: 15px; margin-right: 15px; } @media (max-width: 720px) { .grid__col { width: calc(100% - 30px); } } @media (min-width: 720px) and (max-width: 960px) { .grid__col { width: calc(50% - 30px); } } @media (min-width: 960px) and (max-width: 1140px) { .grid__col { width: calc(33.333333333333336% - 30px); } } @media (min-width: 1140px) { .grid__col { width: calc(25% - 30px); } }