I dynamically generate MediaQueries from Zurb Foundation breakpoints for a grid with the following Sass code:

$i: 2;
@each $s,
$breakpoint in $breakpoints {
    @media (min-width: $breakpoint) {
        div.grid {
            .element {
                width: calc(100%/#{$i});
            }
        }
    }
    $i: $i+1;
}

In my case, it generates the media queries for all breakpoints defined for the Zurb Foundation Framework in the Sass array $breakpoints. For each breakpoint, it increases the number of elements displayed in a row of the grid by adjusting its width, starting with two elements for the smallest screen width. Of course, for the .element, the display property must be set to inline-block.