When building a grid system for your site, properties (like number of columns or gutter size) will need different values at different viewport widths. In previous versions of Zen Grids, this meant changing the Zen Grids' global variables each time you wanted to build a layout at a different viewport size. With the layout module, you can instead set grid system properties that override your default global variables within the scope of the layout mixin.

For example:

$zen-columns: 1; // Default to one column for mobile layout.
@include zen-layout($columns: 3) {
// $zen-columns is set to 3 inside this block and can be used to build a
// layout for the following breakpoint.
@media screen and (min-width: 777px) {
.sidebar {
// The sidebar will span the first column of the 3 columns defined.
@include zen-grid-item(1, 1);
}
}
}
// $zen-columns is back to 1 after the zen-layout() block.

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.

When a named layout is given to the $layout parameter of one of the layout module's mixins that layout's properties will be used instead of any global variables for the entirety of the mixin's @content.