This should get your close to creating a custom grid for foundation within whatever media query you want. Just change the word "class" to whatever you want to use. I haven't tested this, just copied in the large-# classes as a base, but it should work.

medium-grid.css

@media only screen and (your-widths) {
  .row .class-1 {
    position: relative;
    width: 8.33333%; }

  .row .class-2 {
    position: relative;
    width: 16.66667%; }

  .row .class-3 {
    position: relative;
    width: 25%; }

  .row .class-4 {
    position: relative;
    width: 33.33333%; }

  .row .class-5 {
    position: relative;
    width: 41.66667%; }

  .row .class-6 {
    position: relative;
    width: 50%; }

  .row .class-7 {
    position: relative;
    width: 58.33333%; }

  .row .class-8 {
    position: relative;
    width: 66.66667%; }

  .row .class-9 {
    position: relative;
    width: 75%; }

  .row .class-10 {
    position: relative;
    width: 83.33333%; }

  .row .class-11 {
    position: relative;
    width: 91.66667%; }

  .row .class-12 {
    position: relative;
    width: 100%; }

  .row .class-offset-1 {
    position: relative;
    margin-left: 8.33333%; }

  .row .class-offset-2 {
    position: relative;
    margin-left: 16.66667%; }

  .row .class-offset-3 {
    position: relative;
    margin-left: 25%; }

  .row .class-offset-4 {
    position: relative;
    margin-left: 33.33333%; }

  .row .class-offset-5 {
    position: relative;
    margin-left: 41.66667%; }

  .row .class-offset-6 {
    position: relative;
    margin-left: 50%; }

  .row .class-offset-7 {
    position: relative;
    margin-left: 58.33333%; }

  .row .class-offset-8 {
    position: relative;
    margin-left: 66.66667%; }

  .row .class-offset-9 {
    position: relative;
    margin-left: 75%; }

  .row .class-offset-10 {
    position: relative;
    margin-left: 83.33333%; }
}