---
name: grid
tags: recommended, stable, boilerplate, gui
description: A simple GUI tool to display a square grid with subdivisions.
---

# Grid Plugin

A visual development helper for CSS Page Weaver that displays
  customizable grid overlays on pages. Useful for layout debugging and
  ensuring consistent spacing in print designs.

- **Squared grid**: Repeating grid with customizable spacing
  and subdivisions
- **Persistent settings**: Grid preferences saved per document in
  localStorage
- **Screen-only**: Grid overlays only appear in screen view, not in
  print output

## Installation

This plugin is part of the CSS Page Weaver plugin ecosystem. It should
  be included in your `csspageweaver/plugins/` directory.


## Usage

### Toggle the grid

Use the toggle switch in the CSS Page Weaver UI panel to show/hide the
  grid overlay.

### Customize grid parameters

Four adjustable parameters are available in the UI panel:

- **Spacing (px)**: Distance between bold grid lines (default: 56px)
- **Steps**: Number of subdivisions between bold lines (default: 5)
- **Position X (px)**: Horizontal offset of the grid (default: 28px)
- **Position Y (px)**: Vertical offset of the grid (default: 0px)

### Configure default values

You can set default grid parameters in your configuration:

```json
  {
    "grid": {
      "parameters": {
        "spacing": 56,
        "steps": 5,
        "positionX": 28,
        "positionY": 0
      }
    }
  }
```

CSS Custom Properties

The grid uses CSS custom properties that can be overridden in `grid.css`:

```
  :root {
    --grid-bold: #bfbfbf;      /* Bold grid line color */
    --grid-light: #efefef;     /* Light grid line color */
    --grid-color: magenta;     /* Column grid color */
    --nbr-columns: 8;          /* Number of columns (1-12) */
  }
```