Responsive Foundation 6.0.0

Sidebar

Grid » How to Use the Grid Grid MixinLink

Since: 2.0.0 New Issue

The official grid mixin. Use only where necessary to override grid classes. Arguments are the same as you use to write grid classes, in the same order.

Examples

Override the margin class on a modified callout.

		.callout {
			@extend %col-sm-margin-quarter;
		}
		
		.callout-modified {
			@include col( $sm, quarter );
		}
Parameters:
  • @param {variable | number} | $breakpoint
    The window width to begin applying your styles. Can be any pixel value, but $xs, $sm, $md, $lg, and $xl are standard in this framework.
  • @param {string} | $option
    The grid option to use, ie "push", "pull", "margin". Pass "" for no option, or leave it out altogether - the mixin will check this and fix it for you.
  • @param {number | string} | $col
    The number of columns you want. Accepts friendly classes such as "half", or use Boostrap standard (1 - 12).
  • @param {bool} | $use-css-grid
    Whether or not to use CSS Grid instead of floats as the basis for this grid item's styling. CSS Grid requires some parent class styling.
  • @param {bool} | $force
    Whether or not to override the original styles by printing them where this mixin is called. You probably don't want to change this unless you're working on Foundation.
Source: grid/_grid-mixins.scss, line 176 View Source