https://github.com/unsass/grid

Sass functions and mixins to use grid.
https://github.com/unsass/grid

grid sass unsass

Last synced: 16 days ago
JSON representation

Sass functions and mixins to use grid.

• Host: GitHub
• URL: https://github.com/unsass/grid
• Owner: unsass
• License: mit
• Created: 2022-02-25T09:11:21.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T22:01:49.000Z (almost 2 years ago)
• Last Synced: 2025-01-12T11:34:12.322Z (27 days ago)
• Topics: grid, sass, unsass
• Language: SCSS
• Homepage:
• Size: 1.39 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Grid

[![Version](https://flat.badgen.net/npm/v/@unsass/grid)](https://www.npmjs.com/package/@unsass/grid)

[![Downloads](https://flat.badgen.net/npm/dt/@unsass/grid)](https://www.npmjs.com/package/@unsass/grid)

[![License](https://flat.badgen.net/npm/license/@unsass/grid)](https://www.npmjs.com/package/@unsass/grid)

## Introduction

Sass functions and mixins to use grid.

## Installing

```shell

npm install @unsass/grid

```

## Usage

### Styles

```scss

@use "@unsass/grid/styles";

```

### Configuration

```scss

@use "@unsass/grid" with (

    $columns: 10,

    $screens: (

        "lg": 1024px

    )

);

```

### Options

| Name          | Default | Description                                                                                         |

|---------------|---------|-----------------------------------------------------------------------------------------------------|

| `$columns`    | `12`    | Sets numbers of columns.                                                                            |

| `$column-gap` | `12px`  | Sets the column gap.                                                                                |

| `$rows`       | `6`     | Sets  numbers of rows.                                                                              |

| `$rows-gap`   | `12px`  | Sets the row gap.                                                                                   |

| `$screens`    | `()`    | Sets breakpoints rules. See here for [default tokens](https://github.com/unsass/breakpoint#tokens). |