MonorailCss

Container

Utilities for creating responsive container widths with automatic max-width constraints.

Class CSS Output
container 
width: 100%;
@media (width >= 40rem) {
  max-width: 40rem;
}
@media (width >= 48rem) {
  max-width: 48rem;
}
@media (width >= 64rem) {
  max-width: 64rem;
}
@media (width >= 80rem) {
  max-width: 80rem;
}
@media (width >= 96rem) {
  max-width: 96rem;
}
}

container

width: 100%;
@media (width >= 40rem) {
  max-width: 40rem;
}
@media (width >= 48rem) {
  max-width: 48rem;
}
@media (width >= 64rem) {
  max-width: 64rem;
}
@media (width >= 80rem) {
  max-width: 80rem;
}
@media (width >= 96rem) {
  max-width: 96rem;
}

Reference

} @media (width >= 48rem) { max-width MDN ↗
} @media (width >= 64rem) { max-width MDN ↗
} @media (width >= 80rem) { max-width MDN ↗
} @media (width >= 96rem) { max-width MDN ↗
@media (width >= 40rem) { max-width MDN ↗
width MDN ↗

CSS Properties

  • } @media (width >= 48rem) { max-width
  • } @media (width >= 64rem) { max-width
  • } @media (width >= 80rem) { max-width
  • } @media (width >= 96rem) { max-width
  • @media (width >= 40rem) { max-width
  • width