walter-boente_book-collection/csspageweaver/plugins/grid

name	tags	description
grid	recommended, stable, boilerplate, gui	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:

  {
    "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) */
  }