Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@littlemissrobot/sass-grid

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@littlemissrobot/sass-grid

Little Miss Robot grid setup for providing classes and configuration settings.

4.0.17
latest
Source
npm

Version published: 3 years ago

Weekly downloads: 38; decreased by-28.3%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

Little Miss Robot - Sass Grid

This package provides a configuration object, to generate classes for a "grid" layout. The grid layout lets you divide your interface in multiple columns to align and position content next to each other.

IMPORTANT

Make use of Dart Sass:

This library makes use of Dart Sass, which is the primary implementation of Sass. Make sure that your Sass compiler is making use of Dart Sass.
Generate only what you need:

This library generates classes based on your configuration. The larger the configuration, the more css, the larger the CSS file. DO NOT enable all the config options, but only the ones you actually use and need!

Install

# As a dependency
$ npm install @littlemissrobot/sass-grid
# As a dev-dependency
$ npm install --save-dev @littlemissrobot/sass-grid

Usage

Import the library from the node_modules folder:

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-grid" as _grid;

Pass the configuration to the dependencies and the library:

// Dependency
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-system" as _system with (
	$spacing: (
		baseline: 8px,
	),
	$breakpoints: (
		viewports: (
			vp-3: 360px,
			vp-4: 480px,
			vp-7: 720px,
			vp-9: 992px,
			vp-12: 1200px
		)
	)
);

// Library
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-grid" as _grid with (
	$settings: (),
	$grid: (),
	$cols: (),
	$cols-none: (),
	$col: (),
	$col-auto: (),
	$col-full: (),
	$col-start: (),
	$col-start-auto: (),
	$col-end: (),
	$col-end-auto: (),
	$rows: (),
	$rows-none: (),
	$row: (),
	$row-auto: (),
	$row-full: (),
	$row-start: (),
	$row-start-auto: (),
	$row-end: (),
	$row-end-auto: (),
	$gap: (),
	$col-gap: (),
	$row-gap: (),
	$gap-item: (),
	$col-gap-item: (),
	$row-gap-item: (),
	$flow-row: (),
	$flow-col: (),
	$flow-row-dense: (),
	$flow-col-dense: (),
	$auto-cols-auto: (),
	$auto-cols-min: (),
	$auto-cols-max: (),
	$auto-cols-fr: (),
	$auto-rows-auto: (),
	$auto-rows-min: (),
	$auto-rows-max: (),
	$auto-rows-fr: (),
	$ji-start: (),
	$ji-end: (),
	$ji-center: (),
	$ji-stretch: (),
	$jc-start: (),
	$jc-end: (),
	$jc-center: (),
	$jc-stretch: (),
	$jc-between: (),
	$jc-around: (),
	$jc-evenly: (),
	$js-start: (),
	$js-end: (),
	$js-center: (),
	$js-stretch: (),
	$ai-start: (),
	$ai-end: (),
	$ai-center: (),
	$ai-stretch: (),
	$ac-start: (),
	$ac-end: (),
	$ac-center: (),
	$ac-stretch: (),
	$ac-between: (),
	$ac-around: (),
	$ac-evenly: (),
	$as-start: (),
	$as-end: (),
	$as-center: (),
	$as-stretch: (),
	$pi-start: (),
	$pi-end: (),
	$pi-center: (),
	$pi-stretch: (),
	$pc-start: (),
	$pc-end: (),
	$pc-center: (),
	$pc-stretch: (),
	$pc-between: (),
	$pc-around: (),
	$pc-evenly: (),
	$ps-start: (),
	$ps-end: (),
	$ps-center: (),
	$ps-stretch: (),
	$order-first: (),
	$order-last: (),
	$order: (),
);

$settings

A map to setup the specifics of your grid. The map requires:

spacing: The default responsive spacing on the grid. These must contain the same keys as the keys within the $viewports variable of @littlemissrobot/sass-breakpoints dependency. The value of these keys represent the number used by @littlemissrobot/sass-spacing dependency, multiplied by the $baseline. Use the default key to indicate a fallback. if the viewport goes below the latest breakpoint, then the default spacing values is used.

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-grid" as _grid with (
	$settings: (
		spacing: (
			default: 2,
			vp-7: 4,
			vp-12: 8
		)
	),
);

Grid

Class	Variable	Property
u-grid	$grid	`display: grid`

@use "@littlemissrobot/sass-grid" as _grid with (
	$grid: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-grid"></div>
<div class="u-grid@vp-7"></div>
<div class="u-grid@to-vp-7"></div>

Cols

Class	Variable	Property
u-cols-1	$cols	`grid-template-columns`

@use "@littlemissrobot/sass-grid" as _grid with (
	$cols: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-cols-2"></div>
<div class="u-cols-3@vp-7"></div>
<div class="u-cols-4@to-vp-7"></div>

Cols-none

Class	Variable	Property
u-cols-none	$cols-none	`grid-template-columns: none`

@use "@littlemissrobot/sass-grid" as _grid with (
	$cols-none: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-cols-none"></div>
<div class="u-cols-none@vp-7"></div>
<div class="u-cols-none@to-vp-7"></div>

Col

Class	Variable	Property
u-col-1	$col	`grid-column`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-col-2"></div>
<div class="u-col-3@vp-7"></div>
<div class="u-cos-4@to-vp-7"></div>

Col-auto

Class	Variable	Property
u-col-auto	$col-auto	`grid-column: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-col-auto"></div>
<div class="u-col-auto@vp-7"></div>
<div class="u-col-auto@to-vp-7"></div>

Col-full

Class	Variable	Property
u-col-full	$col-full	`grid-column: 1 / -1`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-full: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-col-full"></div>
<div class="u-col-full@vp-7"></div>
<div class="u-col-full@to-vp-7"></div>

Col-start

Class	Variable	Property
u-col-start-1	$col-start	`grid-column-start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-start: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-col-start-1"></div>
<div class="u-col-start-2@vp-7"></div>
<div class="u-col-start-3@to-vp-7"></div>

Col-start-auto

Class	Variable	Property
u-col-start:auto	$col-start-auto	`grid-column-start: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-start-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-col-start-auto"></div>
<div class="u-col-start-auto@vp-7"></div>
<div class="u-col-start-auto@to-vp-7"></div>

Col-end

Class	Variable	Property
u-col-end-1	$col-end	`grid-column-end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-end: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-col-end-1"></div>
<div class="u-col-end-2@vp-7"></div>
<div class="u-col-end-3@to-vp-7"></div>

Col-end-auto

Class	Variable	Property
u-col-end-auto	$col-end-auto	`grid-column-end: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-end-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-col-end-auto"></div>
<div class="u-col-end-auto@vp-7"></div>
<div class="u-col-end-auto@to-vp-7"></div>

Rows

Class	Variable	Property
u-rows-1	$rows	`grid-template-rows`

@use "@littlemissrobot/sass-grid" as _grid with (
	$rows: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-rows-2"></div>
<div class="u-rows-3@vp-7"></div>
<div class="u-rows-4@to-vp-7"></div>

Rows-none

Class	Variable	Property
u-rows-none	$rows-none	`grid-template-rows: none`

@use "@littlemissrobot/sass-grid" as _grid with (
	$rows-none: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-rows-none"></div>
<div class="u-rows-none@vp-7"></div>
<div class="u-rows-none@to-vp-7"></div>

Row

Class	Variable	Property
u-row-1	$row	`grid-row`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-row-2"></div>
<div class="u-row-3@vp-7"></div>
<div class="u-ros-4@to-vp-7"></div>

Row-auto

Class	Variable	Property
u-row-auto	$row-auto	`grid-row: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-row-auto"></div>
<div class="u-row-auto@vp-7"></div>
<div class="u-row-auto@to-vp-7"></div>

Row-full

Class	Variable	Property
u-row-full	$row-full	`grid-row: 1 / -1`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row-full: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-row-full"></div>
<div class="u-row-full@vp-7"></div>
<div class="u-row-full@to-vp-7"></div>

Row-start

Class	Variable	Property
u-row-start-1	$row-start	`grid-row-start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row-start: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-row-start-1"></div>
<div class="u-row-start-2@vp-7"></div>
<div class="u-row-start-3@to-vp-7"></div>

Row-start-auto

Class	Variable	Property
u-row-start-auto	$row-start-auto	`grid-row-start: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row-start-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-row-start-auto"></div>
<div class="u-row-start-auto@vp-7"></div>
<div class="u-row-start-auto@to-vp-7"></div>

Row-end

Class	Variable	Property
u-row-end-1	$row-end	`grid-row-end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row-end: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-row-end-1"></div>
<div class="u-row-end-2@vp-7"></div>
<div class="u-row-end-3@to-vp-7"></div>

Row-end-auto

Class	Variable	Property
u-row-end-auto	$row-end-auto	`grid-row-end: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row-end-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-row-end-auto"></div>
<div class="u-row-end-auto@vp-7"></div>
<div class="u-row-end-auto@to-vp-7"></div>

Gap

Class that will make use of the settings spacing key and loop over the keys within the map and apply the spacing, on the columns and the rows, on the defined breakpoints.

Class	Variable	Property
u-gap	$gap	`gap`

@use "@littlemissrobot/sass-grid" as _grid with (
	$gap: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-gap"></div>
<div class="u-gap@vp-7"></div>
<div class="u-gap@to-vp-7"></div>

Col-gap

Class that will make use of the settings spacing key and loop over the keys within the map and apply the spacing, on the columns, on the defined breakpoints.

Class	Variable	Property
u-col-gap	$col-gap	`col-gap`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-gap: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-col-gap"></div>
<div class="u-col-gap@vp-7"></div>
<div class="u-col-gap@to-vp-7"></div>

Row-gap

Class that will make use of the settings spacing key and loop over the keys within the map and apply the spacing, on the rows, on the defined breakpoints.

Class	Variable	Property
u-row-gap	$row-gap	`row-gap`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-y: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-row-grap"></div>
<div class="u-row-grap@vp-7"></div>
<div class="u-row-grap@to-vp-7"></div>

Gap-item

Class that will make use of the settings spacing key and loop over the keys within the map and apply the spacing, on the columns and the rows, on the defined breakpoints.

Class	Variable	Property
u-gap-	$gap	`gap`

@use "@littlemissrobot/sass-grid" as _grid with (
	$gap: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-gap-1"></div>
<div class="u-gap-2@vp-7"></div>
<div class="u-gap-3@to-vp-7"></div>

Col-gap-item

Class that will make use of the settings spacing key and loop over the keys within the map and apply the spacing, on the columns, on the defined breakpoints.

Class	Variable	Property
u-col-gap-	$col-gap-item	`column-gap`

@use "@littlemissrobot/sass-grid" as _grid with (
	$col-gap-item: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-col-gap-1"></div>
<div class="u-col-gap-2@vp-7"></div>
<div class="u-col-gap-3@to-vp-7"></div>

Row-gap

Class that will make use of the settings spacing key and loop over the keys within the map and apply the spacing, on the rows, on the defined breakpoints.

Class	Variable	Property
u-row-gap-	$row-gap	`row-gap`

@use "@littlemissrobot/sass-grid" as _grid with (
	$row-gap: (
		value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		at: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
		to: (
			vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
			vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
		),
	);

<div class="u-row-gap-1"></div>
<div class="u-row-gap-2@vp-7"></div>
<div class="u-row-gap-3@to-vp-7"></div>

Flow-row

Class	Variable	Property
u-flow-row	$flow-row	`grid-auto-flow: row`

@use "@littlemissrobot/sass-grid" as _grid with (
	$flow-row: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-flow-row"></div>
<div class="u-flow-row@vp-7"></div>
<div class="u-flow-row@to-vp-7"></div>

Flow-col

Class	Variable	Property
u-flow-col	$flow-col	`grid-auto-flow: column`

@use "@littlemissrobot/sass-grid" as _grid with (
	$flow-col: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-flow-col"></div>
<div class="u-flow-col@vp-7"></div>
<div class="u-flow-col@to-vp-7"></div>

Flow-col-dense

Class	Variable	Property
u-flow-col-dense	$flow-col-dense	`grid-auto-flow: column dense`

@use "@littlemissrobot/sass-grid" as _grid with (
	$flow-col-dense: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-flow-col-dense"></div>
<div class="u-flow-col-dense@vp-7"></div>
<div class="u-flow-col-dense@to-vp-7"></div>

Flow-row-dense

Class	Variable	Property
u-flow-row-dense	$flow-row-dense	`grid-auto-flow: row dense`

@use "@littlemissrobot/sass-grid" as _grid with (
	$flow-row-dense: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-flow-row-dense"></div>
<div class="u-flow-row-dense@vp-7"></div>
<div class="u-flow-row-dense@to-vp-7"></div>

auto-cols-auto

Class	Variable	Property
u-auto-cols-auto	$auto-cols-auto	`grid-auto-columns: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-cols-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-cols-auto"></div>
<div class="u-auto-cols-auto@vp-7"></div>
<div class="u-auto-cols-auto@to-vp-7"></div>

auto-cols-min

Class	Variable	Property
u-auto-cols-min	$auto-cols-min	`grid-auto-columns: min-content`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-cols-min: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-cols-min"></div>
<div class="u-auto-cols-min@vp-7"></div>
<div class="u-auto-cols-min@to-vp-7"></div>

auto-cols-max

Class	Variable	Property
u-auto-cols-max	$auto-cols-max	`grid-auto-columns: max-content`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-cols-max: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-cols-max"></div>
<div class="u-auto-cols-max@vp-7"></div>
<div class="u-auto-cols-max@to-vp-7"></div>

auto-cols-fr

Class	Variable	Property
u-auto-cols-fr	$auto-cols-fr	`grid-auto-columns: minmax(0, 1fr)`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-cols-fr: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-cols-fr"></div>
<div class="u-auto-cols-fr@vp-7"></div>
<div class="u-auto-cols-fr@to-vp-7"></div>

auto-rows-auto

Class	Variable	Property
u-auto-rows-auto	$auto-rows-auto	`grid-auto-columns: auto`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-rows-auto: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-rows-auto"></div>
<div class="u-auto-rows-auto@vp-7"></div>
<div class="u-auto-rows-auto@to-vp-7"></div>

auto-rows-min

Class	Variable	Property
u-auto-rows-min	$auto-rows-min	`grid-auto-columns: min-content`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-rows-min: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-rows-min"></div>
<div class="u-auto-rows-min@vp-7"></div>
<div class="u-auto-rows-min@to-vp-7"></div>

auto-rows-max

Class	Variable	Property
u-auto-rows-max	$auto-rows-max	`grid-auto-columns: max-content`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-rows-max: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-rows-max"></div>
<div class="u-auto-rows-max@vp-7"></div>
<div class="u-auto-rows-max@to-vp-7"></div>

auto-rows-fr

Class	Variable	Property
u-auto-rows-fr	$auto-rows-fr	`grid-auto-columns: minmax(0, 1fr)`

@use "@littlemissrobot/sass-grid" as _grid with (
	$auto-rows-fr: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-auto-rows-fr"></div>
<div class="u-auto-rows-fr@vp-7"></div>
<div class="u-auto-rows-fr@to-vp-7"></div>

justify-items-start

Class	Variable	Property
u-ji-start	$ji-start	`justify-items: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ji-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ji-start"></div>
<div class="u-ji-start@vp-7"></div>
<div class="u-ji-start@to-vp-7"></div>

justify-items-end

Class	Variable	Property
u-ji-end	$ji-end	`justify-items: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ji-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ji-end"></div>
<div class="u-ji-end@vp-7"></div>
<div class="u-ji-end@to-vp-7"></div>

justify-items-center

Class	Variable	Property
u-ji-center	$ji-center	`justify-items: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ji-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ji-center"></div>
<div class="u-ji-center@vp-7"></div>
<div class="u-ji-center@to-vp-7"></div>

justify-items-stretch

Class	Variable	Property
u-ji-stretch	$ji-stretch	`justify-items: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ji-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ji-stretch"></div>
<div class="u-ji-stretch@vp-7"></div>
<div class="u-ji-stretch@to-vp-7"></div>

justify-content-start

Class	Variable	Property
u-jc-start	$jc-start	`justify-content: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$jc-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-jc-start"></div>
<div class="u-jc-start@vp-7"></div>
<div class="u-jc-start@to-vp-7"></div>

justify-content-end

Class	Variable	Property
u-jc-end	$jc-end	`justify-content: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$jc-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-jc-end"></div>
<div class="u-jc-end@vp-7"></div>
<div class="u-jc-end@to-vp-7"></div>

justify-content-center

Class	Variable	Property
u-jc-center	$jc-center	`justify-content: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$jc-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-jc-center"></div>
<div class="u-jc-center@vp-7"></div>
<div class="u-jc-center@to-vp-7"></div>

justify-content-stretch

Class	Variable	Property
u-jc-stretch	$jc-stretch	`justify-content: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$jc-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-jc-stretch"></div>
<div class="u-jc-stretch@vp-7"></div>
<div class="u-jc-stretch@to-vp-7"></div>

justify-content-between

Class	Variable	Property
u-jc-between	$jc-between	`justify-content: space-between`

@use "@littlemissrobot/sass-grid" as _grid with (
	$jc-between: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-jc-between"></div>
<div class="u-jc-between@vp-7"></div>
<div class="u-jc-between@to-vp-7"></div>

justify-content-around

Class	Variable	Property
u-jc-around	$jc-around	`justify-content: space-around`

@use "@littlemissrobot/sass-grid" as _grid with (
	$jc-around: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-jc-around"></div>
<div class="u-jc-around@vp-7"></div>
<div class="u-jc-around@to-vp-7"></div>

justify-content-evenly

Class	Variable	Property
u-jc-evenly	$jc-evenly	`justify-content: space-evenly`

@use "@littlemissrobot/sass-grid" as _grid with (
	$jc-evenly: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-jc-evenly"></div>
<div class="u-jc-evenly@vp-7"></div>
<div class="u-jc-evenly@to-vp-7"></div>

justify-self-start

Class	Variable	Property
u-js-start	$js-start	`justify-self: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$js-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-js-start"></div>
<div class="u-js-start@vp-7"></div>
<div class="u-js-start@to-vp-7"></div>

justify-self-end

Class	Variable	Property
u-js-end	$js-end	`justify-self: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$js-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-js-end"></div>
<div class="u-js-end@vp-7"></div>
<div class="u-js-end@to-vp-7"></div>

justify-self-center

Class	Variable	Property
u-js-center	$js-center	`justify-self: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$js-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-js-center"></div>
<div class="u-js-center@vp-7"></div>
<div class="u-js-center@to-vp-7"></div>

justify-self-stretch

Class	Variable	Property
u-js-stretch	$js-stretch	`justify-self: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$js-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-js-stretch"></div>
<div class="u-js-stretch@vp-7"></div>
<div class="u-js-stretch@to-vp-7"></div>

Align-items-start

Class	Variable	Property
u-ai-start	$ai-start	`align-items: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ai-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ai-start"></div>
<div class="u-ai-start@vp-7"></div>
<div class="u-ai-start@to-vp-7"></div>

Align-items-end

Class	Variable	Property
u-ai-end	$ai-end	`align-items: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ai-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ai-end"></div>
<div class="u-ai-end@vp-7"></div>
<div class="u-ai-end@to-vp-7"></div>

Align-items-center

Class	Variable	Property
u-ai-center	$ai-center	`align-items: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ai-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ai-center"></div>
<div class="u-ai-center@vp-7"></div>
<div class="u-ai-center@to-vp-7"></div>

Align-items-stretch

Class	Variable	Property
u-ai-stretch	$ai-stretch	`align-items: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ai-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ai-stretch"></div>
<div class="u-ai-stretch@vp-7"></div>
<div class="u-ai-stretch@to-vp-7"></div>

Align-content-start

Class	Variable	Property
u-ac-start	$ac-start	`align-content: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ac-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ac-start"></div>
<div class="u-ac-start@vp-7"></div>
<div class="u-ac-start@to-vp-7"></div>

Align-content-end

Class	Variable	Property
u-ac-end	$ac-end	`align-content: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ac-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ac-end"></div>
<div class="u-ac-end@vp-7"></div>
<div class="u-ac-end@to-vp-7"></div>

Align-content-center

Class	Variable	Property
u-ac-center	$ac-center	`align-content: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ac-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ac-center"></div>
<div class="u-ac-center@vp-7"></div>
<div class="u-ac-center@to-vp-7"></div>

Align-content-stretch

Class	Variable	Property
u-ac-stretch	$ac-stretch	`align-content: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ac-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ac-stretch"></div>
<div class="u-ac-stretch@vp-7"></div>
<div class="u-ac-stretch@to-vp-7"></div>

Align-content-between

Class	Variable	Property
u-ac-between	$ac-between	`align-content: space-between`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ac-between: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ac-between"></div>
<div class="u-ac-between@vp-7"></div>
<div class="u-ac-between@to-vp-7"></div>

Align-content-around

Class	Variable	Property
u-ac-around	$ac-around	`align-content: space-around`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ac-around: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ac-around"></div>
<div class="u-ac-around@vp-7"></div>
<div class="u-ac-around@to-vp-7"></div>

Align-content-evenly

Class	Variable	Property
u-ac-evenly	$ac-evenly	`align-content: space-evenly`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ac-evenly: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ac-evenly"></div>
<div class="u-ac-evenly@vp-7"></div>
<div class="u-ac-evenly@to-vp-7"></div>

Align-self-start

Class	Variable	Property
u-as-start	$as-start	`align-self: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$as-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-as-start"></div>
<div class="u-as-start@vp-7"></div>
<div class="u-as-start@to-vp-7"></div>

Align-self-end

Class	Variable	Property
u-as-end	$as-end	`align-self: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$as-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-as-end"></div>
<div class="u-as-end@vp-7"></div>
<div class="u-as-end@to-vp-7"></div>

Align-self-center

Class	Variable	Property
u-as-center	$as-center	`align-self: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$as-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-as-center"></div>
<div class="u-as-center@vp-7"></div>
<div class="u-as-center@to-vp-7"></div>

Align-self-stretch

Class	Variable	Property
u-as-stretch	$as-stretch	`align-self: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$as-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-as-stretch"></div>
<div class="u-as-stretch@vp-7"></div>
<div class="u-as-stretch@to-vp-7"></div>

Place-items-start

Class	Variable	Property
u-pi-start	$pi-start	`place-items: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pi-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pi-start"></div>
<div class="u-pi-start@vp-7"></div>
<div class="u-pi-start@to-vp-7"></div>

Place-items-end

Class	Variable	Property
u-pi-end	$pi-end	`place-items: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pi-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pi-end"></div>
<div class="u-pi-end@vp-7"></div>
<div class="u-pi-end@to-vp-7"></div>

Place-items-center

Class	Variable	Property
u-pi-center	$pi-center	`place-items: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pi-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pi-center"></div>
<div class="u-pi-center@vp-7"></div>
<div class="u-pi-center@to-vp-7"></div>

Place-items-stretch

Class	Variable	Property
u-pi-stretch	$pi-stretch	`place-items: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pi-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pi-stretch"></div>
<div class="u-pi-stretch@vp-7"></div>
<div class="u-pi-stretch@to-vp-7"></div>

Place-content-start

Class	Variable	Property
u-pc-start	$pc-start	`place-content: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pc-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pc-start"></div>
<div class="u-pc-start@vp-7"></div>
<div class="u-pc-start@to-vp-7"></div>

Place-content-end

Class	Variable	Property
u-pc-end	$pc-end	`place-content: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pc-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pc-end"></div>
<div class="u-pc-end@vp-7"></div>
<div class="u-pc-end@to-vp-7"></div>

Place-content-center

Class	Variable	Property
u-pc-center	$pc-center	`place-content: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pc-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pc-center"></div>
<div class="u-pc-center@vp-7"></div>
<div class="u-pc-center@to-vp-7"></div>

Place-content-stretch

Class	Variable	Property
u-pc-stretch	$pc-stretch	`place-content: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pc-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pc-stretch"></div>
<div class="u-pc-stretch@vp-7"></div>
<div class="u-pc-stretch@to-vp-7"></div>

Place-content-between

Class	Variable	Property
u-pc-between	$pc-between	`place-content: space-between`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pc-between: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pc-between"></div>
<div class="u-pc-between@vp-7"></div>
<div class="u-pc-between@to-vp-7"></div>

Place-content-around

Class	Variable	Property
u-pc-around	$pc-around	`place-content: space-around`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pc-around: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pc-around"></div>
<div class="u-pc-around@vp-7"></div>
<div class="u-pc-around@to-vp-7"></div>

Place-content-evenly

Class	Variable	Property
u-pc-evenly	$pc-evenly	`place-content: space-evenly`

@use "@littlemissrobot/sass-grid" as _grid with (
	$pc-evenly: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-pc-evenly"></div>
<div class="u-pc-evenly@vp-7"></div>
<div class="u-pc-evenly@to-vp-7"></div>

Place-self-start

Class	Variable	Property
u-ps-start	$ps-start	`place-self: start`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ps-start: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ps-start"></div>
<div class="u-ps-start@vp-7"></div>
<div class="u-ps-start@to-vp-7"></div>

Place-self-end

Class	Variable	Property
u-ps-end	$ps-end	`place-self: end`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ps-end: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ps-end"></div>
<div class="u-ps-end@vp-7"></div>
<div class="u-ps-end@to-vp-7"></div>

Place-self-center

Class	Variable	Property
u-ps-center	$ps-center	`place-self: center`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ps-center: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ps-center"></div>
<div class="u-ps-center@vp-7"></div>
<div class="u-ps-center@to-vp-7"></div>

Place-self-stretch

Class	Variable	Property
u-ps-stretch	$ps-stretch	`place-self: stretch`

@use "@littlemissrobot/sass-grid" as _grid with (
	$ps-stretch: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-ps-stretch"></div>
<div class="u-ps-stretch@vp-7"></div>
<div class="u-ps-stretch@to-vp-7"></div>

Order-first

Class	Variable	Property
u-order-first	$order-first	`order: -1`

@use "@littlemissrobot/sass-flex" as _flex with (
	$order-first: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-order-first"></div>
<div class="u-order-first@vp-7"></div>
<div class="u-order-first@to-vp-7"></div>

Order-last

Class	Variable	Property
u-order-last	$order-last	`order: 999`

@use "@littlemissrobot/sass-flex" as _flex with (
	$order-last: (
		default: true,
		at: ("vp-3", "vp-7"),
		to: ("vp-3", "vp-7"),
	);

<div class="u-order-last"></div>
<div class="u-order-last@vp-7"></div>
<div class="u-order-last@to-vp-7"></div>

Order

Class	Variable	Property
u-order-1	$order	`order: 1`

@use "@littlemissrobot/sass-flex" as _flex with (
	$order: (
		value: (1, 2, 3),
		at: (
			vp-3: (1, 2, 3),
			vp-7: (1, 2, 3),
		),
		to: (
			vp-3: (1, 2, 3),
			vp-7: (1, 2, 3),
		),
	);

<div class="u-order-1"></div>
<div class="u-order-2@vp-7"></div>
<div class="u-order-3@to-vp-7"></div>

Keywords

FAQs

What is @littlemissrobot/sass-grid?

Is @littlemissrobot/sass-grid popular?

Is @littlemissrobot/sass-grid well maintained?

Package last updated on 13 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install