The "Flow" module for the Zen Grids system allows an item in the normal flow of a document to be aligned to the grid, e.g. an image can be aligned to the grid.

To understand this module, it is important to understand the CSS definition of “normal flow”. According to CSS, all content is part of the normal flow by default. For example, paragraph text and images are part of the normal flow.

Positioned elements (floats, absolute positioning, etc.) are not part of the normal flow.

Zen Grid’s grid items are also positioned elements and, therefore, are no longer part of the normal flow.

For example, a layout designer will often make one of Zen Grid’s grid items span multiple columns. The elements within that grid item are part of the normal flow and span the same number of columns as their containing grid item. The layout designer may wish to have an element in the normal flow align to one or more of the columns within the grid item. For example, if a grid item spans 3 columns, the layout designer may want to have all of the images within it to align to the first column inside that grid item and have other flow items wrap around those images.

Zen Grids comes with several configuration variables that affect what CSS its mixins and functions output. The default values of these variables are all set using the “guarded assignment” flag, !default. So you can safely set those values before you @import Zen Grids and your values will be respected.

This variable works the same as $zen-auto-include-grid-item-base, except it is used for flow items instead of grid items. You can generate more efficient CSS if you set this to false and manually apply the zen-grid-item-base() mixin to all flow items from within a single ruleset.

Apply this to an HTML item that is in the normal flow of a document to help align it to the grid. Set the $column-span to the number of columns that the HTML element should span. For responsive layouts with a percentage-based grid width, set the $parent-column-span to the number of columns that the parent element spans; fixed-unit layouts using px, em, etc. do not need to specify this.

Unlike the zen-grid-item() mixin, this mixin does not float the HTML item; see the related zen-float() mixin. This mixin also does not have a half-gutter on each side. By default, it has no gutter in the "alpha position" (the left side) and a full gutter in the "omega position" (the right side.) You can turn on or off the alpha and omega gutters by setting the $alpha-gutter and $omega-gutter parameters to true or false.

Note: when the $direction is set to right (for RTL languages), the alpha position is on the right and the omega position is on the left.