Container

Overview

Containers are the most basic layout element and are required when using the grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Basic container

The basic container is a fixed width proportionate to screen size.

<div class="container">This is some content</div>

Fluid container

It is also possible to add a .container--fluid class to your container and it will have a max width of 100vw regardless of screen size.

<div class="container container--fluid">This is some content</div>

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/bases/container.css

• Directorystyle

  • Directorybases

    • container.css

Stylesheet

@layer cwf-bases {
  .container {
    margin-left: var(--container-margin-left, auto);
    margin-right: var(--container-margin-right, auto);

    padding-left: var(--container-padding-left, var(--size-3));
    padding-right: var(--container-padding-right, var(--size-3));

    width: var(--container-width, 100%);
    max-width: var(--container-max-width, 100vw);

    &:not(.container--fluid) {
      @media (min-width: 576px) {
        max-width: var(--container-max-width, 516px);
      }

      @media (min-width: 768px) {
        max-width: var(--container-max-width, 708px);
      }

      @media (min-width: 1024px) {
        max-width: var(--container-max-width, 964px);
      }

      @media (min-width: 1216px) {
        max-width: var(--container-max-width, 1156px);
      }

      @media (min-width: 1408px) {
        max-width: var(--container-max-width, 1348px);
      }
    }
  }
}