Layout mixins

Mixins of the flex, grid and container layouts. Each one can be called directly with @include or by name inside apply(). See Flex, Grid and Container for guides.

This page is generated from the doc blocks in the core source when the site is built, so it always matches the current release of @nuvoui/core. Every example is compiled against core during the build; open Compiled CSS under an example to see its output. The A to Z index lists every public mixin and function.

Container

layouts/_container.scss

container-base container-padding container

`container-base` mixin

Makes an element full width and centres it on the inline axis (margin-inline: auto).

@mixin container-base

Example

.page {
  @include container-base;
  @include max-width(1200px);
}

Compiled CSS

.page {
  width: 100%;
  margin-inline: auto;
  max-width: 1200px;
}

See also: container. Source: layouts/_container.scss:18

`container-padding` mixin

Sets padding-top and padding-bottom to the same spacing value.

@mixin container-padding($padding)

Parameter	Type	Default	Description
`$padding`	`Number\|Length`	Required	A `$spacings` key (4 gives var(--nu-space-4)) or a value with units, passed through raw

Example

.section {
  @include container-padding(8); // padding-top and padding-bottom: var(--nu-space-8)
}

Compiled CSS

.section {
  padding-top: var(--nu-space-8);
  padding-bottom: var(--nu-space-8);
}

Note. A unitless number that is not a spacing key, or a negative key, raises @error.

See also: container, py. Source: layouts/_container.scss:32

`container` mixin

Builds a centred, full-width container whose max-width steps up at each breakpoint (breakpoint width minus 100px), with block padding of spacing key 4 (top and bottom only, as in v1).

@mixin container($display: block)

Parameter	Type	Default	Description
`$display`	`String`	`block`	Display value: block, flex, grid, inline-block, inline-flex, inline-grid, flow-root, a CSS-wide keyword or var(); anything else raises an error

Example

.page {
  @include container;
}
.page-grid {
  @include container(grid);
  @include cols(12);
}

Compiled CSS

.page {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding-top: var(--nu-space-4);
  padding-bottom: var(--nu-space-4);
}
@media (min-width: 480px) {
  .page {
    max-width: 380px;
  }
}
@media (min-width: 640px) {
  .page {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .page {
    max-width: 668px;
  }
}
@media (min-width: 1024px) {
  .page {
    max-width: 924px;
  }
}
@media (min-width: 1280px) {
  .page {
    max-width: 1180px;
  }
}
@media (min-width: 1536px) {
  .page {
    max-width: 1436px;
  }
}

.page-grid {
  display: grid;
  width: 100%;
  margin-inline: auto;
  padding-top: var(--nu-space-4);
  padding-bottom: var(--nu-space-4);
}
@media (min-width: 480px) {
  .page-grid {
    max-width: 380px;
  }
}
@media (min-width: 640px) {
  .page-grid {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .page-grid {
    max-width: 668px;
  }
}
@media (min-width: 1024px) {
  .page-grid {
    max-width: 924px;
  }
}
@media (min-width: 1280px) {
  .page-grid {
    max-width: 1180px;
  }
}
@media (min-width: 1536px) {
  .page-grid {
    max-width: 1436px;
  }
}
.page-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

Note. 100px is subtracted from each breakpoint width; an em or rem breakpoint gives calc(40em - 100px).

See also: container-base, container-padding. Source: layouts/_container.scss:55

Flex

layouts/_flex.scss

Flexbox layout system for creating flexible page layouts

row row-reverse col col-reverse wrap nowrap wrap-reverse start end center stretch between around evenly x-start x-end x-center x-stretch x-baseline x-content-start x-content-end x-content-center x-content-between x-content-around x-content-evenly x-content-stretch self-auto self-start self-end self-center self-stretch self-baseline shrink no-shrink shrink-twice fill-full fill-auto grow no-grow grow-only fill

`row` mixin

Sets flex-direction to row; applies to a flex container.

@mixin row

Example

.toolbar {
  @include apply(flex, row);
}

Compiled CSS

.toolbar {
  display: flex;
  flex-direction: row;
}

See also: col, row-reverse. Source: layouts/_flex.scss:67

`row-reverse` mixin

Sets flex-direction to row-reverse; applies to a flex container.

@mixin row-reverse

Example

.toolbar {
  @include flex;
  @include row-reverse;
}

Compiled CSS

.toolbar {
  display: flex;
  flex-direction: row-reverse;
}

See also: row. Source: layouts/_flex.scss:79

`col` mixin

Sets flex-direction to column; applies to a flex container.

@mixin col

Example

.stack {
  @include apply(flex, col, gap(4));
}

Compiled CSS

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--nu-space-4);
}
.stack > * {
  --nu-flex-gap: var(--nu-space-4);
}

See also: row, col-reverse. Source: layouts/_flex.scss:90

`col-reverse` mixin

Sets flex-direction to column-reverse; applies to a flex container.

@mixin col-reverse

Example

.chat-log {
  @include flex;
  @include col-reverse;
}

Compiled CSS

.chat-log {
  display: flex;
  flex-direction: column-reverse;
}

See also: col. Source: layouts/_flex.scss:102

`wrap` mixin

Sets flex-wrap to wrap so items move onto new lines; applies to a flex container.

@mixin wrap

Example

.tag-list {
  @include apply(flex, wrap, gap(2));
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nu-space-2);
}
.tag-list > * {
  --nu-flex-gap: var(--nu-space-2);
}

See also: nowrap, wrap-reverse. Source: layouts/_flex.scss:113

`nowrap` mixin

Sets flex-wrap to nowrap so items stay on one line; applies to a flex container.

@mixin nowrap

Example

.tabs {
  @include flex;
  @include nowrap;
}

Compiled CSS

.tabs {
  display: flex;
  flex-wrap: nowrap;
}

See also: wrap. Source: layouts/_flex.scss:125

`wrap-reverse` mixin

Sets flex-wrap to wrap-reverse so new lines stack in reverse order; applies to a flex container.

@mixin wrap-reverse

Example

.tag-list {
  @include flex;
  @include wrap-reverse;
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap-reverse;
}

See also: wrap. Source: layouts/_flex.scss:137

`start` mixin

Sets justify-content to flex-start, packing items at the start of the main axis.

@mixin start

Example

.toolbar {
  @include apply(flex, start);
}

Compiled CSS

.toolbar {
  display: flex;
  justify-content: flex-start;
}

See also: end, center, between. Source: layouts/_flex.scss:148

`end` mixin

Sets justify-content to flex-end, packing items at the end of the main axis.

@mixin end

Example

.actions {
  @include apply(flex, end, gap(2));
}

Compiled CSS

.actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--nu-space-2);
}
.actions > * {
  --nu-flex-gap: var(--nu-space-2);
}

See also: start, center. Source: layouts/_flex.scss:159

`center` mixin

Sets justify-content to center, centring items on the main axis.

@mixin center

Example

.hero {
  @include apply(flex, center, x-center);
}

Compiled CSS

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
}

See also: x-center. Source: layouts/_flex.scss:170

`stretch` mixin

Makes the direct children of a flex container share the main axis equally (each child gets flex: 1 1 0%). Takes no argument; when one child must be wider, give it a fill-{n} or no-grow class.

@mixin stretch

Output: & > * { flex: 1 1 0% }

Example

.tabs {
  @include apply(flex, stretch);
}
.segmented {
  @include flex;
  @include stretch; // .segmented > * { flex: 1 1 0% }
}

Compiled CSS

.tabs {
  display: flex;
}
.tabs > * {
  flex: 1 1 0%;
}

.segmented {
  display: flex;
}
.segmented > * {
  flex: 1 1 0%;
}

See also: grow, x-stretch. Source: layouts/_flex.scss:186

`between` mixin

Sets justify-content to space-between, spreading items with the free space between them.

@mixin between

Example

.header {
  @include apply(flex, between, x-center);
}

Compiled CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

See also: around, evenly. Source: layouts/_flex.scss:199

`around` mixin

Sets justify-content to space-around, giving each item equal space on both sides.

@mixin around

Example

.nav {
  @include flex;
  @include around;
}

Compiled CSS

.nav {
  display: flex;
  justify-content: space-around;
}

See also: between, evenly. Source: layouts/_flex.scss:211

`evenly` mixin

Sets justify-content to space-evenly, making every gap between and around items equal.

@mixin evenly

Example

.stats {
  @include flex;
  @include evenly;
}

Compiled CSS

.stats {
  display: flex;
  justify-content: space-evenly;
}

See also: between, around. Source: layouts/_flex.scss:223

`x-start` mixin

Sets align-items to flex-start, aligning items to the start of the cross axis.

@mixin x-start

Example

.media {
  @include apply(flex, x-start, gap(4));
}

Compiled CSS

.media {
  display: flex;
  align-items: flex-start;
  gap: var(--nu-space-4);
}
.media > * {
  --nu-flex-gap: var(--nu-space-4);
}

See also: x-end, x-center. Source: layouts/_flex.scss:236

`x-end` mixin

Sets align-items to flex-end, aligning items to the end of the cross axis.

@mixin x-end

Example

.bars {
  @include flex;
  @include x-end;
}

Compiled CSS

.bars {
  display: flex;
  align-items: flex-end;
}

See also: x-start. Source: layouts/_flex.scss:248

`x-center` mixin

Sets align-items to center, centring items on the cross axis.

@mixin x-center

Example

.header {
  @include apply(flex, between, x-center);
}

Compiled CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

See also: center. Source: layouts/_flex.scss:259

`x-stretch` mixin

Sets align-items to stretch, stretching items to fill the cross axis.

@mixin x-stretch

Example

.columns {
  @include flex;
  @include x-stretch;
}

Compiled CSS

.columns {
  display: flex;
  align-items: stretch;
}

See also: x-start. Source: layouts/_flex.scss:271

`x-baseline` mixin

Sets align-items to baseline, aligning items along their text baseline.

@mixin x-baseline

Example

.price-row {
  @include apply(flex, x-baseline, gap(2));
}

Compiled CSS

.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--nu-space-2);
}
.price-row > * {
  --nu-flex-gap: var(--nu-space-2);
}

See also: x-center. Source: layouts/_flex.scss:282

`x-content-start` mixin

Sets align-content to flex-start, packing wrapped lines at the start of the cross axis.

@mixin x-content-start

Example

.tag-list {
  @include apply(flex, wrap, x-content-start);
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

See also: x-content-end. Source: layouts/_flex.scss:295

`x-content-end` mixin

Sets align-content to flex-end, packing wrapped lines at the end of the cross axis.

@mixin x-content-end

Example

.tag-list {
  @include apply(flex, wrap, x-content-end);
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

See also: x-content-start. Source: layouts/_flex.scss:306

`x-content-center` mixin

Sets align-content to center, centring wrapped lines on the cross axis.

@mixin x-content-center

Example

.gallery {
  @include apply(flex, wrap, x-content-center);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

See also: x-center. Source: layouts/_flex.scss:317

`x-content-between` mixin

Sets align-content to space-between, spreading wrapped lines with the free space between them.

@mixin x-content-between

Example

.gallery {
  @include apply(flex, wrap, x-content-between);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

See also: x-content-around, x-content-evenly. Source: layouts/_flex.scss:328

`x-content-around` mixin

Sets align-content to space-around, giving each wrapped line equal space on both sides.

@mixin x-content-around

Example

.gallery {
  @include apply(flex, wrap, x-content-around);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

See also: x-content-between. Source: layouts/_flex.scss:339

`x-content-evenly` mixin

Sets align-content to space-evenly, making every gap between and around wrapped lines equal.

@mixin x-content-evenly

Example

.gallery {
  @include apply(flex, wrap, x-content-evenly);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

See also: x-content-between. Source: layouts/_flex.scss:350

`x-content-stretch` mixin

Sets align-content to stretch, stretching wrapped lines to fill the cross axis.

@mixin x-content-stretch

Example

.gallery {
  @include apply(flex, wrap, x-content-stretch);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

See also: x-stretch. Source: layouts/_flex.scss:361

`self-auto` mixin

Sets align-self to auto, so the item follows the container's align-items.

@mixin self-auto

Example

.item {
  @include self-auto;
}

Compiled CSS

.item {
  align-self: auto;
}

See also: self-start, self-center. Source: layouts/_flex.scss:374

`self-start` mixin

Sets align-self to flex-start, aligning this item to the start of the cross axis.

@mixin self-start

Example

.badge {
  @include self-start;
}

Compiled CSS

.badge {
  align-self: flex-start;
}

See also: self-end. Source: layouts/_flex.scss:385

`self-end` mixin

Sets align-self to flex-end, aligning this item to the end of the cross axis.

@mixin self-end

Example

.timestamp {
  @include self-end;
}

Compiled CSS

.timestamp {
  align-self: flex-end;
}

See also: self-start. Source: layouts/_flex.scss:396

`self-center` mixin

Sets align-self to center, centring this item on the cross axis.

@mixin self-center

Example

.icon {
  @include self-center;
}

Compiled CSS

.icon {
  align-self: center;
}

See also: x-center. Source: layouts/_flex.scss:407

`self-stretch` mixin

Sets align-self to stretch, stretching this item to fill the cross axis.

@mixin self-stretch

Example

.divider {
  @include self-stretch;
}

Compiled CSS

.divider {
  align-self: stretch;
}

See also: x-stretch. Source: layouts/_flex.scss:418

`self-baseline` mixin

Sets align-self to baseline, aligning this item along the text baseline.

@mixin self-baseline

Example

.label {
  @include self-baseline;
}

Compiled CSS

.label {
  align-self: baseline;
}

See also: x-baseline. Source: layouts/_flex.scss:429

`shrink` mixin

Sets flex-shrink to 1 so the item can shrink when space runs out.

@mixin shrink

Example

.title {
  @include apply(shrink, truncate);
}

Compiled CSS

.title {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

See also: no-shrink, shrink-twice. Source: layouts/_flex.scss:440

`no-shrink` mixin

Sets flex-shrink to 0 so the item never shrinks below its size.

@mixin no-shrink

Example

.avatar {
  @include apply(no-shrink, width(10));
}

Compiled CSS

.avatar {
  flex-shrink: 0;
  width: var(--nu-space-10);
}

See also: shrink. Source: layouts/_flex.scss:451

`shrink-twice` mixin

Sets flex-shrink to 2 so the item shrinks twice as fast as items with flex-shrink 1.

@mixin shrink-twice

Example

.sidebar {
  @include shrink-twice;
}

Compiled CSS

.sidebar {
  flex-shrink: 2;
}

See also: shrink. Source: layouts/_flex.scss:462

`fill-full` mixin

Sets flex to 0 0 100% so the item takes a full row and neither grows nor shrinks.

@mixin fill-full

Example

.banner {
  @include fill-full;
}

Compiled CSS

.banner {
  flex: 0 0 100%;
}

See also: fill, fill-auto. Source: layouts/_flex.scss:475

`fill-auto` mixin

Sets flex to 1 1 auto so the item starts at its content size, then grows and shrinks.

@mixin fill-auto

Example

.search {
  @include fill-auto;
}

Compiled CSS

.search {
  flex: 1 1 auto;
}

See also: grow, fill-full. Source: layouts/_flex.scss:486

`grow` mixin

Sets flex to 1 1 0% so the item grows and shrinks from a zero base, sharing space equally with other grow items.

@mixin grow

Example

.main {
  @include grow;
}

Compiled CSS

.main {
  flex: 1 1 0%;
}

See also: grow-only, no-grow, fill-auto. Source: layouts/_flex.scss:497

`no-grow` mixin

Sets flex to none so the item keeps its size and neither grows nor shrinks.

@mixin no-grow

Example

.logo {
  @include no-grow;
}

Compiled CSS

.logo {
  flex: none;
}

See also: grow. Source: layouts/_flex.scss:508

`grow-only` mixin

Sets flex to 1 0 auto so the item grows from its content size but never shrinks.

@mixin grow-only

Example

.content {
  @include grow-only;
}

Compiled CSS

.content {
  flex: 1 0 auto;
}

See also: grow. Source: layouts/_flex.scss:519

`fill` mixin

Sizes a flex child to span a number of columns out of $column-count (12 by default), subtracting the container gap from --nu-flex-gap.

@mixin fill($size)

Parameter	Type	Default	Description
`$size`	`Number`	Required	Whole number of columns to span, from 1 to `$column-count`; a fraction, 0, a negative number, more than `$column-count`, a value with a unit or a non-number raises an error

Output: flex: 0 0 <width>; max-width: <width>; min-width: 0, where width is a calc() over 100% and var(--nu-flex-gap)

Example

.sidebar {
  @include fill(4); // one third of the row, minus its share of the gap
}
.layout {
  @include apply(flex, gap(4));
  > .main {
    @include fill(8);
  }
}

Compiled CSS

.sidebar {
  flex: 0 0 calc((100% - 2 * var(--nu-flex-gap)) / 3);
  max-width: calc((100% - 2 * var(--nu-flex-gap)) / 3);
  min-width: 0;
}

.layout {
  display: flex;
  gap: var(--nu-space-4);
}
.layout > * {
  --nu-flex-gap: var(--nu-space-4);
}
.layout > .main {
  flex: 0 0 calc((100% - 0.5 * var(--nu-flex-gap)) / 1.5);
  max-width: calc((100% - 0.5 * var(--nu-flex-gap)) / 1.5);
  min-width: 0;
}

Note. Gap mixins set --nu-flex-gap on direct children, so place the item directly inside the gap container; without a gap it reads the registered initial value 0px.

See also: grow, fill-full, gap. Source: layouts/_flex.scss:539

Grid

layouts/_grid.scss

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(--nu-space-4);
}
.cards > * {
  --nu-flex-gap: var(--nu-space-4);
}

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

`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));
}

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

`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;
}

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

`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(--nu-space-4);
}
.cards > * {
  --nu-flex-gap: var(--nu-space-4);
}

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

`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));
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`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;
}

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

`grid-place-at` mixin

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

@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;
}

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

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

`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;
}

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

`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;
}

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

Layout mixins

Container

container-base mixin

container-padding mixin

container mixin

Flex

row mixin

row-reverse mixin

col mixin

col-reverse mixin

wrap mixin

nowrap mixin

wrap-reverse mixin

start mixin

end mixin

center mixin

stretch mixin

between mixin

around mixin

evenly mixin

x-start mixin

x-end mixin

x-center mixin

x-stretch mixin

x-baseline mixin

x-content-start mixin

x-content-end mixin

x-content-center mixin

x-content-between mixin

x-content-around mixin

x-content-evenly mixin

x-content-stretch mixin

self-auto mixin

self-start mixin

self-end mixin

self-center mixin

self-stretch mixin

self-baseline mixin

shrink mixin

no-shrink mixin

shrink-twice mixin

fill-full mixin

fill-auto mixin

grow mixin

no-grow mixin

grow-only mixin

fill mixin

Grid

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

`container-base` mixin

`container-padding` mixin

`container` mixin

`row` mixin

`row-reverse` mixin

`col` mixin

`col-reverse` mixin

`wrap` mixin

`nowrap` mixin

`wrap-reverse` mixin

`start` mixin

`end` mixin

`center` mixin

`stretch` mixin

`between` mixin

`around` mixin

`evenly` mixin

`x-start` mixin

`x-end` mixin

`x-center` mixin

`x-stretch` mixin

`x-baseline` mixin

`x-content-start` mixin

`x-content-end` mixin

`x-content-center` mixin

`x-content-between` mixin

`x-content-around` mixin

`x-content-evenly` mixin

`x-content-stretch` mixin

`self-auto` mixin

`self-start` mixin

`self-end` mixin

`self-center` mixin

`self-stretch` mixin

`self-baseline` mixin

`shrink` mixin

`no-shrink` mixin

`shrink-twice` mixin

`fill-full` mixin

`fill-auto` mixin

`grow` mixin

`no-grow` mixin

`grow-only` mixin

`fill` 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