Grid mixins

Grid layout system: column and row templates, auto-fit and auto-fill tracks, flow, alignment and item placement.

Gap utilities are defined in _spacing.scss.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Grid. The A to Z index lists every public mixin and function.

Source: layouts/_grid.scss

Mixins

cols rows cols-custom auto-fit auto-fill flow-row flow-col flow-dense justify align place col-span row-span col-start col-end row-start row-end grid-place-at grid-col-at grid-row-at

`cols` mixin

Sets grid-template-columns to a number of equal columns that can shrink below their content width.

@mixin cols($count)

Parameter	Type	Default	Description
`$count`	`Number\|String`	Required	Number of columns: a whole number of 1 or more, calc() or var(); anything else raises an error

Output: grid-template-columns: repeat($count, minmax(0, 1fr))

Example

.cards {
  @include apply(grid, cols(3), gap(4));
}

Compiled CSS

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wu-space-4);
}
.cards > * {
  --wu-gap: var(--wu-space-4);
}

grid-template-columns on MDN

See also: rows, cols-custom, auto-fit. Source: layouts/_grid.scss:46

`rows` mixin

Sets grid-template-rows to a number of equal rows that can shrink below their content height.

@mixin rows($count)

Parameter	Type	Default	Description
`$count`	`Number\|String`	Required	Number of rows: a whole number of 1 or more, calc() or var(); anything else raises an error

Output: grid-template-rows: repeat($count, minmax(0, 1fr))

Example

.board {
  @include grid;
  @include rows(2);
}

Compiled CSS

.board {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

grid-template-rows on MDN

See also: cols. Source: layouts/_grid.scss:60

`cols-custom` mixin

Sets grid-template-columns to a custom track list, with underscores standing in for spaces.

@mixin cols-custom($template)

Parameter	Type	Default	Description
`$template`	`String\|List`	Required	Track list, quoted ("1fr_auto_1fr", each underscore outside brackets and parentheses becomes a space) or unquoted (1fr auto 1fr)

Example

.layout {
  @include grid;
  @include cols-custom("250px_1fr"); // grid-template-columns: 250px 1fr
}

Compiled CSS

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
}

grid-template-columns on MDN

See also: cols. Source: layouts/_grid.scss:73

`auto-fit` mixin

Creates as many columns of at least $min-width as fit, collapsing empty tracks so items stretch to fill the row.

@mixin auto-fit($min-width)

Parameter	Type	Default	Description
`$min-width`	`Length\|String`	Required	Minimum column width: a $grid-item-sizes key (xs, sm, md, lg, xl; sm gives 250px by default), a length or percentage, calc() or var(), or a whole minmax() track used as written; a unitless number or unknown word raises an error

Output: grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr))

Example

.cards {
  @include apply(grid, auto-fit(250px), gap(4));
}

Compiled CSS

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--wu-space-4);
}
.cards > * {
  --wu-gap: var(--wu-space-4);
}

grid-template-columns on MDN

See also: auto-fill. Source: layouts/_grid.scss:131

`auto-fill` mixin

Creates as many columns of at least $min-width as fit, keeping empty tracks so items keep their column width.

@mixin auto-fill($min-width)

Parameter	Type	Default	Description
`$min-width`	`Length\|String`	Required	Minimum column width: a $grid-item-sizes key (xs, sm, md, lg, xl; sm gives 250px by default), a length or percentage, calc() or var(), or a whole minmax() track used as written; a unitless number or unknown word raises an error

Output: grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr))

Example

.gallery {
  @include grid;
  @include auto-fill(200px);
}

Compiled CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

grid-template-columns on MDN

See also: auto-fit. Source: layouts/_grid.scss:154

`flow-row` mixin

Sets grid-auto-flow to row, placing items row by row; same as the .flow-row class.

@mixin flow-row

Example

.list {
  @include grid;
  @include flow-row;
}

Compiled CSS

.list {
  display: grid;
  grid-auto-flow: row;
}

grid-auto-flow on MDN

See also: flow-col, flow-dense. Source: layouts/_grid.scss:169

`flow-col` mixin

Sets grid-auto-flow to column, placing items column by column; same as the .flow-col class.

@mixin flow-col

Example

.list {
  @include grid;
  @include rows(3);
  @include flow-col;
}

Compiled CSS

.list {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
}

grid-auto-flow on MDN

See also: flow-row. Source: layouts/_grid.scss:182

`flow-dense` mixin

Sets grid-auto-flow to dense so later items back-fill earlier gaps; same as the .flow-dense class.

@mixin flow-dense

Example

.masonry {
  @include grid;
  @include flow-dense;
}

Compiled CSS

.masonry {
  display: grid;
  grid-auto-flow: dense;
}

grid-auto-flow on MDN

See also: flow-row. Source: layouts/_grid.scss:194

`justify` mixin

Sets justify-items, aligning grid items along the inline axis of their cells.

Grid only: for flex containers use the flex justify mixins (start, center, between).

@mixin justify($value)

Parameter	Type	Default	Description
`$value`	`String`	Required	Any justify-items value, such as start, end, center or stretch

Example

.cards {
  @include apply(grid, cols(3), justify(center));
}

Compiled CSS

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
}

justify-items on MDN

See also: align, place. Source: layouts/_grid.scss:219

`align` mixin

Sets align-items, aligning grid items along the block axis of their cells.

Grid only: for flex containers use the x-* mixins (x-center, x-start).

@mixin align($value)

Parameter	Type	Default	Description
`$value`	`String`	Required	Any align-items value, such as start, end, center or stretch

Example

.cards {
  @include grid;
  @include align(start);
}

Compiled CSS

.cards {
  display: grid;
  align-items: start;
}

align-items on MDN

See also: justify, place. Source: layouts/_grid.scss:235

`place` mixin

Sets place-items, aligning grid items on both axes of their cells at once.

Grid only.

@mixin place($value)

Parameter	Type	Default	Description
`$value`	`String`	Required	Any place-items value, such as center or start end

Example

.icon-grid {
  @include grid;
  @include place(center);
}

Compiled CSS

.icon-grid {
  display: grid;
  place-items: center;
}

place-items on MDN

See also: justify, align. Source: layouts/_grid.scss:251

`col-span` mixin

Makes a grid item span a number of columns.

@mixin col-span($span)

Parameter	Type	Default	Description
`$span`	`Number\|String`	Required	Number of columns to span: a whole number of 1 or more, calc() or var(); anything else raises an error

Output: grid-column: span $span / span $span

Example

.featured {
  @include col-span(2);
}

Compiled CSS

.featured {
  grid-column: span 2/span 2;
}

grid-column on MDN

See also: row-span, col-start. Source: layouts/_grid.scss:267

`row-span` mixin

Makes a grid item span a number of rows.

@mixin row-span($span)

Parameter	Type	Default	Description
`$span`	`Number\|String`	Required	Number of rows to span: a whole number of 1 or more, calc() or var(); anything else raises an error

Output: grid-row: span $span / span $span

Example

.tall {
  @include row-span(2);
}

Compiled CSS

.tall {
  grid-row: span 2/span 2;
}

grid-row on MDN

See also: col-span. Source: layouts/_grid.scss:282

`col-start` mixin

Sets grid-column-start, the column line where the item begins.

@mixin col-start($start)

Parameter	Type	Default	Description
`$start`	`Number\|String`	Required	Line number, line name or span value

Example

.aside {
  @include col-start(2);
}

Compiled CSS

.aside {
  grid-column-start: 2;
}

grid-column-start on MDN

See also: col-end. Source: layouts/_grid.scss:296

`col-end` mixin

Sets grid-column-end, the column line where the item ends.

@mixin col-end($end)

Parameter	Type	Default	Description
`$end`	`Number\|String`	Required	Line number, line name or span value

Example

.wide {
  @include col-end(-1); // runs to the last column line
}

Compiled CSS

.wide {
  grid-column-end: -1;
}

grid-column-end on MDN

See also: col-start. Source: layouts/_grid.scss:308

`row-start` mixin

Sets grid-row-start, the row line where the item begins.

@mixin row-start($start)

Parameter	Type	Default	Description
`$start`	`Number\|String`	Required	Line number, line name or span value

Example

.footer {
  @include row-start(3);
}

Compiled CSS

.footer {
  grid-row-start: 3;
}

grid-row-start on MDN

See also: row-end. Source: layouts/_grid.scss:320

`row-end` mixin

Sets grid-row-end, the row line where the item ends.

@mixin row-end($end)

Parameter	Type	Default	Description
`$end`	`Number\|String`	Required	Line number, line name or span value

Example

.sidebar {
  @include row-end(-1);
}

Compiled CSS

.sidebar {
  grid-row-end: -1;
}

grid-row-end on MDN

See also: row-start. Source: layouts/_grid.scss:332

`grid-place-at` mixin

Sets grid-column and grid-row together to place an item in the grid.

For start / end pairs pass list.slash(1, 3); a literal 1 / 3 is Sass division and warns.

@mixin grid-place-at($col, $row)

Parameter	Type	Default	Description
`$col`	`Number\|String\|List`	Required	Value for grid-column, such as 2 or span 2
`$row`	`Number\|String\|List`	Required	Value for grid-row, such as 1 or span 2

Example

.hero {
  @include grid-place-at(2, span 2);
}

Compiled CSS

.hero {
  grid-column: 2;
  grid-row: span 2;
}

See also: grid-col-at, grid-row-at. Source: layouts/_grid.scss:347

`grid-col-at` mixin

Sets grid-column to place an item across columns.

@mixin grid-col-at($col)

Parameter	Type	Default	Description
`$col`	`Number\|String\|List`	Required	Value for grid-column, such as 2, span 2 or list.slash(1, -1)

Example

@use "sass:list";
.full-width {
  @include grid-col-at(list.slash(1, -1)); // grid-column: 1 / -1
}

Compiled CSS

.full-width {
  grid-column: 1 / -1;
}

grid-column on MDN

See also: grid-place-at. Source: layouts/_grid.scss:371

`grid-row-at` mixin

Sets grid-row to place an item across rows.

@mixin grid-row-at($row)

Parameter	Type	Default	Description
`$row`	`Number\|String\|List`	Required	Value for grid-row, such as 2, span 2 or list.slash(1, 3)

Example

.tall {
  @include grid-row-at(span 2);
}

Compiled CSS

.tall {
  grid-row: span 2;
}

grid-row on MDN

See also: grid-place-at. Source: layouts/_grid.scss:383

Grid mixins

Mixins

cols mixin

rows mixin

cols-custom mixin

auto-fit mixin

auto-fill mixin

flow-row mixin

flow-col mixin

flow-dense mixin

justify mixin

align mixin

place mixin

col-span mixin

row-span mixin

col-start mixin

col-end mixin

row-start mixin

row-end mixin

grid-place-at mixin

grid-col-at mixin

grid-row-at mixin

`cols` mixin

`rows` mixin

`cols-custom` mixin

`auto-fit` mixin

`auto-fill` mixin

`flow-row` mixin

`flow-col` mixin

`flow-dense` mixin

`justify` mixin

`align` mixin

`place` mixin

`col-span` mixin

`row-span` mixin

`col-start` mixin

`col-end` mixin

`row-start` mixin

`row-end` mixin

`grid-place-at` mixin

`grid-col-at` mixin

`grid-row-at` mixin