Xy Grid - Class="Grid-Container"
I´m Using the New Xy-Grid from Now On, but I´m Not Really Clear About the Class "Grid-Container". the Grid-Container Just Marks the Max-Width of the...
I´m using the new XY-Grid from now on, but I´m not really clear about the class "grid-container". The grid-container just marks the max-width of the Foundation-Grid, am I right?
For what case do I need the class "grid-container full"? I do have the same output just without it. I mean, if I do it that way:
<div class="grid-x grid-margin-x">
<div class="cell small-12">cell</div>
Content
</div
</div>
Thanks a lot!
1 Answer
The docs at describe it a bit:
The grid defaults to the full width of the available space. To contain it horizontally use the grid-container class. The container will be centered and have a max-width equal to your $grid-container setting (1200px by default), along with padding on the left/right equal to half your $grid-container-padding setting.
And the full class is also described at :
To stretch the content to the full width of the available space and remove grid container padding, simply add the class full to your grid-container. Note that this variation is primarily for use for the grid-margin-x - it works with grid-padding-x too, but will work the same as .grid-container.fluid.
The full class removes the padding from the grid container.
// Grid Container
.grid-container {
@include xy-grid-container;
&.full {
@include xy-grid-container(100%, 0);
}
}
/// @param {Number} $width [$grid-container] - a width to limit the container to.
/// @param {Number} $padding [$grid-container-padding] - paddings of the container.
@mixin xy-grid-container(
$width: $grid-container,
$padding: $grid-container-padding
) {
@include xy-gutters($gutters: $padding, $gutter-type: padding);
The following applies padding-right: 0 and padding-left: 0:
/// Create gutters for a cell/container.
///
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.
/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
@mixin xy-gutters(
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$gutter-position: right left,
$negative: false
) {
$operator: if($negative, '-', '');
// If we have declared negative gutters, force type to `margin.
$gutter-type: if($negative, 'margin', $gutter-type);
// Output our margin gutters.
@if (type-of($gutters) == 'map') {
@include -zf-breakpoint-value(auto, $gutters) {
$gutter: rem-calc($-zf-bp-value) / 2;
// Loop through each gutter position
@each $value in $gutter-position {
#{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
}
}
}
@else if (type-of($gutters) == 'number') {
$gutter: rem-calc($gutters) / 2;
// Loop through each gutter position
@each $value in $gutter-position {
#{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
}
}
}