Container

Container

A container is a placeholder element within a Grid that is used to size and position a Figure.

Markup Example

  <div class="grid">
    <div class="container" data-sizes="twocolumn-portrait twocolumn-landscape"></div>
    <div class="column col-1"></div>
    <div class="column col-2"></div>
  </div>

Sizes

The data-sizes attribute is used to provide a space-separated list of sizes that can be placed within the container. These are the same names specified by the Figure data-sizes property.

This is most commonly used to support multiple crops for images.

Filling Order

Containers are filled based on the order in which they appear in markup.

Container Fitting

The stretched height of the container is the maximum height allowed for content within the container. For example:

  <div class="grid fixed" style="height: 500px">
    <div class="container" data-sizes="onecol" style="top: 60px; bottom: 20px">
    </div>
  </div>

The container in the markup above has a maximum height of 420 (500 - 60 - 20). If the content from the matched Figure is 420 pixels or less, then it will be placed within the container (and adjacent columns will be reduced). If the figure is larger than 420 pixels, then the container will be left empty.

Column Height Reduction

Once a container is filled, it will automatically reduce the height of any non-fixed columns siblings that occur later in markup order.

  <div class="grid fixed" style="height: 500px">
    <div>
      <!-- This column will not be reduced because it occurs before the container -->
      <div class="column"></div>
      <div class="container" data-sizes="onecol"></div>
      <!-- The column height will be reduced -->
      <div class="column"></div>
    </div>
    <!-- This column will not reduced because it is not a sibling of the container -->
    <div class="column"></div>
  </div>

Containers will also automatically adjust the height of any element with class=group, using the same rules as columns.

Pinning to Bottom

Add class=bottom to a container to add space below the column instead of above. This is useful for containers that you wish to position below columns.

Grouping

  <div class="grid">
    <div>
      <div class="container" data-sizes="onecol"></div>
      <!-- The column height will be reduced -->
      <div class="column"></div>
    </div>
    <!-- This column will not be affected -->
    <div class="column"></div>
  </div>

Centering a container

Not currently supported.

Fixed Containers

If a container has class=fixed, then its height will not be modified during layout, nor will the height any adjacent columns. Additionally, there will be no checks to make sure that there was enough room to fit the content within the container.