https://github.com/daun/detect-grid
Detect and mark grid cells for easy styling
https://github.com/daun/detect-grid
css grid js layout
Last synced: about 1 year ago
JSON representation
Detect and mark grid cells for easy styling
- Host: GitHub
- URL: https://github.com/daun/detect-grid
- Owner: daun
- License: mit
- Created: 2020-08-02T18:52:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-08T10:48:50.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T14:06:19.414Z (about 1 year ago)
- Topics: css, grid, js, layout
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Detect Grid
[](https://www.npmjs.com/package/detect-grid)
[](https://bundlephobia.com/result?p=detect-grid)
[](./LICENSE)
Detect and mark grid cells for easy styling.
## What does it do?
This package detects the rows and columns of a layout visually by comparing the
offset from the top-left edge of the parent container. Each element is assigned
a row and column index.
It will mark each detected cell with data attributes for easy targeting in CSS.
This makes styling cells by index feasible even in flexbox or grid layouts where
visual position doesn't always follow source order.
## Installation
```bash
npm install detect-grid
```
## Usage
### Detect grid cells
Returns an array of rows and columns for further processing. Indices are zero-based.
```js
import detectGrid from 'detect-grid'
const grid = document.querySelector('.grid')
const rows = detectGrid(grid)
rows.forEach((cols, rowIndex) => {
cols.forEach((cell, colIndex) => {
console.log(`Cell at row ${rowIndex} and col ${colIndex}`, cell.textContent)
})
})
```
### Mark grid cells
Detects rows and columns and mark them with data attributes for CSS styling.
```js
import { markGrid } from 'detect-grid'
const grid = document.querySelector('.grid')
markGrid(grid, { selector: '.cell' })
```
**Before**
```html
```
**After**
> :warning: While the `detectGrid` function returns zero-based arrays, the data
attributes added by `markGrid` start counting from `1` to keep compatibility
with CSS nth-child selectors.
```html
```
### CSS variables
Some visual effects like gradients require CSS custom properties for calculating
the correct value for each row and cell. You can enable those behind an optional
feature flag when marking grid cells:
```js
markGrid(grid, { cssVariables: true })
```
You can now use the following CSS properties like `--col-fraction` or `--row-fraction`
for calculating styles:
```html
```
## Options
Configure how cells are detected by passing an options object as second parameter.
```js
const rows = detectGrid(grid, {
selector: '.cell',
align: 'bottom'
})
```
|Option|Description|Type/Options|Default|
|---|---|---|---|
|`selector`|DOM selector to find grid cells|Selector string|Use direct childnodes|
|`justify`|Horizontal alignment of measuring point|String: `left`, `center`, `right`|`left`|
|`align`|Vertical alignment of measuring point|String: `top`, `center`, `bottom`|`top`|
|`tolerance`|Tolerance to group rows/columns by|Number (px)|`0`|
## License
[MIT](https://opensource.org/licenses/MIT)