detect-grid

Detect Grid

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

npm install detect-grid

Usage

Detect grid cells

Returns an array of rows and columns for further processing. Indices are zero-based.

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.

import { markGrid } from 'detect-grid'

const grid = document.querySelector('.grid')

markGrid(grid, { selector: '.cell' })

Before

<div class="grid">
  <div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

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.

<div class="grid">
  <div>
    <div class="cell" data-nth-row="1" data-nth-col="1" data-first-row data-first-col></div>
    <div class="cell" data-nth-row="1" data-nth-col="2" data-first-row data-last-col></div>
  </div>
  <div>
    <div class="cell" data-nth-row="2" data-nth-col="1" data-first-col></div>
    <div class="cell" data-nth-row="2" data-nth-col="2" data-last-col></div>
  </div>
  <div>
    <div class="cell" data-nth-row="2" data-nth-col="1" data-last-row data-first-col></div>
    <div class="cell" data-nth-row="2" data-nth-col="2" data-last-row data-last-col></div>
  </div>
</div>

License

MIT