Container

A .container is the top-most wrapper for your main contents. By default a container has a fixed value (980px) to limit the content width. Modify the @container-width variable to change the width. A container has the left and right margins set to auto that will center the container inside its parent.

<header>
  <div class="container">
    Header content
  </div>
</header>
<section>
  <div class="container">
    Section content
  </div>
</section>

For example, to create a common landing-page layout where you have multiple section divided vertically that differ in background colors, you would have parent section elements that stretch horizontally, then inside you would have a container that wraps the contents.

Fluid-width containers

<section>
  <div class="container stretch">
    Section content
  </div>
</section>

If you want your container to stretch to 100% of the parent width, add .stretch class on it. The .stretch class also works independently. (width: 100% is the only property it has.)

Fluid, but with limited-width containers

<section>
  <div class="container stretch limit-width">
    Section content
  </div>
</section>

If you want your container to stretch to 100% of the parent width but also be limited to a specific width, add .limit-width class on a .container.stretch. The @container-max-width variable is used for defining max-width for the container. By default, it's set to the same value as the container width (980px).

Columns

Petal has a basic layout system where you can make quick, simple columns. This doesn't include any responsive overrides for mobile screen widths though; the columns will always stretch and collapse relatively to the container width.

By default, Petal uses the CSS3 Flexbox properties for column layouts. Most modern browsers support flexboxes just fine (in case of IE, versions 10 and up), but if for some reason you need to fall back to the traditional 'float' method, change the @col-method: flex; in your variables sheet to float.

By the looks, both methods will display exactly the same with the same settings. Using flexbox has some benefits, including a cleaner markup because you don't need the micro clearfix hack anymore (that inserts pseudo :before and :after elements to the parent row element), and that you can use some optional classes that will work only in flexbox mode.

Place a div with the .row class, then insert .col-x class inside to make columns, where x is the number of columns the row is divided into. (Supports up to 5 columns)

The .row element has a negative horizontal margin with the same width as the @container-padding, so that the columns inside rows won't have doubled padding width. If you're not using a .row inside .container, make sure you manually specify paddings for the parent wrapper (You can use a .ph-15 quick-padding class)

The default left/right padding for the columns is 15px, same as the .container inner paddings. To change this, modify the @col-padding value. It's recommended that you keep the column padding value and the container inner padding value equal.

Spanned columns

Add .colspan-x to column divs, where x is the number of columns you would 'merge' (think of a table layout).

Nesting columns

You can nest any columns inside columns. Just don't forget to nest .rows as well.

Collapsed column gutters

Add .collapse-gutter class on parent .row elements and it will 'collapse' the gutter inbetween columns by reducing the padding space to half while keeping the outer paddings on left and right. This is useful in cases where you want to make a layout out of Panels and want to reduce the visible horizontal gutter size inbetween them.

Vertically stretched columns (Flexbox Only)

Add .stretch class on .col-x elements to vertically stretch children elements to row height. This will only work when you're using the flexbox columns.

Customizable LESS variables

// layout
@container-width: 980px;
@container-padding: 15px;
@col-method: flex; // flex or float (legacy)
@col-padding: 15px;