Media¶

Description: media can be used in a grid.

ctr('.test', {
  grid: {
    option: {
      gutter: 60px
    }
    column: '1/2'
    media: {
      'sm': {
        column: '1/3'
      }
    }
  }
})

.test:
  grid:
    option:
      gutter: 60px
    column: 1/2
    media:
      sm:
        column: 1/3

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 2 - (60px - 60px * 1 / 2));
}
.test:nth-child(1n) {
  margin-right: 60px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(2n) {
  float: right;
  margin-right: 0;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    flex: 0 0 auto;
    width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:nth-child(1n) {
    margin-right: 60px;
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:last-child {
    margin-right: 0;
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:nth-child(3n) {
    float: right;
    margin-right: 0;
  }
}

ctr('.test', {
  grid: {
    option: {
      gutter: 60px
    }
    column: '1/2'
    media: {
      'sm': {
        column: '1/3'
      }
    }
  }
})

.test {
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 2 - (60px - 60px * 1 / 2));
}
.test:nth-child(1n) {
  margin-right: 60px;
}
.test:last-child {
  margin-right: 0;
}
.test:nth-child(2n) {
  float: right;
  margin-right: 0;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    flex: 0 0 auto;
    width: calc(99.9% * 1 / 3 - (60px - 60px * 1 / 3));
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:nth-child(1n) {
    margin-right: 60px;
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:last-child {
    margin-right: 0;
  }
}
@media (min-width: 400px) and (max-width: 600px) {
  .test:nth-child(3n) {
    float: right;
    margin-right: 0;
  }
}

.test:
  grid:
    option:
      gutter: 60px
    column: 1/2
    media:
      sm:
        column: 1/3

Notes

• Known Bugs: Unfortunately, I didn’t have the foresight to integrate this properly from the get-go, and various media combinations may not work, just cross your fingers and hope for the best
  • ctr will throw an error if it doesn’t work and you will need to reverse the order, as in, put grid in media and not media in grid
• No other features really make sense to put in a grid
• The option Object is inherited via deep merge