padded-grid - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/components/index.d.ts

@@ -5,3 +5,3 @@ /**
  */
-export * from './XGrid';
-export * from './YGrid';
+export * from './Grid';
+export * from './Spacer';

dist/hooks/index.d.ts

@@ -8,1 +8,2 @@ /**
 export * from './useVisibleGridLines';
+export * from './useSpacerDimensions';

dist/hooks/useGridCalculations.d.ts

@@ -1,6 +0,10 @@
-import type { UseGridCalculationsProps, UseGridCalculationsResult } from '@types';
+import { UseGridCalculationsProps, UseGridCalculationsResult } from '@types';
 /**
  * Hook for calculating grid layout dimensions and properties.
  * Handles different grid variants (line, pattern, fixed, auto) and their specific calculations.
+ *
+ * @param containerWidth - The width of the grid container.
+ * @param config - The configuration object for the grid.
+ * @returns An object containing grid layout properties such as `gridTemplateColumns`, `columnsCount`, and `calculatedGap`.
  */
 export declare function useGridCalculations({ containerWidth, config, }: UseGridCalculationsProps): UseGridCalculationsResult;

dist/hooks/useGridDimensions.d.ts

@@ -5,4 +5,7 @@ import { type RefObject } from 'react';
  * Hook for tracking grid container dimensions.
- * Uses ResizeObserver for efficient updates and prevents unnecessary re-renders.
+ * Uses `ResizeObserver` for efficient updates and prevents unnecessary re-renders.
+ *
+ * @param ref - A React ref object pointing to the grid container element.
+ * @returns An object containing the `width` and `height` of the container.
  */
 export declare function useGridDimensions(ref: RefObject<HTMLDivElement | null>): GridDimensions;

dist/hooks/useVisibleGridLines.d.ts

@@ -1,6 +0,12 @@
-import { type RefObject } from 'react';
-import type { VisibleRange } from '@types';
+import type { RefObject } from 'react';
+import type { CSSValue, VisibleRange } from '@types';
 /**
  * Hook for calculating which grid lines should be rendered based on viewport visibility.
  * Optimizes performance by only rendering lines that are visible or about to become visible.
+ *
+ * @param totalLines - Total number of grid lines.
+ * @param lineHeight - The height of each grid line in pixels.
+ * @param containerRef - A React ref object pointing to the grid container element.
+ * @param buffer - The buffer zone (in pixels or CSS value) above and below the viewport.
+ * @returns An object representing the visible range of grid lines (`start` and `end` indices).
  */
@@ -11,3 +17,3 @@ export declare function useVisibleGridLines({ totalLines, lineHeight, containerRef, buffer, }: {
     containerRef: RefObject<HTMLDivElement>;
-    buffer?: number;
+    buffer?: CSSValue;
 }): VisibleRange;

dist/index.d.ts

@@ -9,2 +9,2 @@ /**
 export { useGridDimensions, useGridCalculations } from './hooks';
-export { GRID } from './utils';
+export { Y_GRID, X_GRID } from './config';

dist/README.md

 # Padded Grid
 
-A development tool for visualizing and maintaining consistent grid systems in React applications. Similar to design
-tools like Figma, it provides toggleable grid overlays that help ensure precise spacing and alignment during
-development.
+Padded Grid is a lightweight, debugging / dev-tool library for visualizing and maintaining consistent grid systems in
+React applications. Inspired by tools like Figma, it provides powerful, customizable grid overlays and spacing utilities
+to ensure precise alignment and spacing during development.
 
 ## Features
 
-- 🎯 Interactive grid overlays for development
-- 📏 Column grid visualization (like Figma's layout grid)
-- 📐 Baseline grid for typography alignment
-- 🎚️ Toggleable grid visibility
-- 🎨 Customizable grid colors and opacity
-- 🔧 TypeScript-first with comprehensive types
-- ⚡️ Zero runtime dependencies
-- 🪶 Tree-shakeable & optimized bundle
+- 🎯 **Interactive Grid Overlays:** Toggleable grids for development.
+- 📏 **Column Grid Visualization:** Perfect for layout alignment.
+- 📐 **Baseline Grid Support:** Align typography and spacing.
+- 🧩 **Flexible Spacer Component:** Simplify spacing with adjustable dimensions.
+- 🎨 **Customizable:** Colors, opacity, and grid configurations.
+- ⚡ **Performance Optimized:** Zero runtime dependencies, tree-shakeable, and modern browser support.
+- 🔧 **TypeScript-First:** Comprehensive typings for better DX.
 
+## Installation
+
+Install via npm or yarn:
+
+```shell
+npm install padded-grid
+```
+
 ## Quick Start
 
+Add padded-grid to your React project to visualize grids and manage spacing during development:
+
 ```tsx
-import { XGrid, YGrid } from 'padded-grid';
+import { XGrid, YGrid, Spacer } from 'padded-grid';
 import 'padded-grid/styles.css';
@@ -48,2 +57,13 @@
 
+      {/* Spacer for dynamic spacing */}
+      <Spacer
+        height="16px"
+        width="100%"
+        config={{
+          baseUnit: 8,
+          color: "#ff0000",
+        }}
+        visibility="visible"
+      />
+
       <main>Your content...</main>
@@ -55,20 +75,207 @@ </div>
 
-## Documentation
+---
 
-- [Grid System Documentation](./docs/GRID_SYSTEM.md) - Core concepts and formulas
-- [Component API Reference](./docs/COMPONENTS.md) - Detailed component docs
-- [Examples & Use Cases](./docs/EXAMPLES.md) - Common patterns
+## Components
 
+### XGrid (Horizontal Grid)
+
+The XGrid component provides column-based grid overlays for layout visualization.
+
+#### Props
+
+```typescript
+interface XGConfig {
+  columns?: number | GridColumnsPattern; // Fixed number or pattern of columns
+  columnWidth?: CSSValue;               // For auto-calculated columns
+  gap?: CSSValue;                       // Gap between columns
+  align?: 'start' | 'center' | 'end';   // Grid alignment
+  color?: CSSProperties['color'];       // Guide color
+  maxWidth?: CSSValue;                  // Maximum grid width
+  padding?: CSSProperties['padding'];   // Grid padding
+  variant?: 'line';                     // Optional line variant
+  zIndex?: number;                      // Z-index for grid
+}
+
+interface XGProps {
+  config: XGConfig;
+  visibility?: 'hidden' | 'visible';
+  className?: string;
+  style?: Partial<XGStyles>;
+}
+```
+
+#### Examples
+
+```tsx
+// Fixed columns
+<XGrid
+  config={{
+    columns: 12,
+    gap: 16,
+    maxWidth: "1200px",
+  }}
+  visibility="visible"
+/>
+
+// Custom column pattern
+<XGrid
+  config={{
+    columns: ['64px', '1fr', '2fr', '1fr', '64px'],
+    gap: 24,
+    color: "#0000ff1a",
+  }}
+  visibility="visible"
+/>
+```
+
+---
+
+### YGrid (Vertical Grid)
+
+The YGrid component provides baseline grid overlays for typography alignment.
+
+#### Props
+
+```typescript
+interface YGConfig {
+  baseUnit?: number;                   // Base unit for spacing (default: 8)
+  height?: CSSValue;                   // Grid height (default: '100%')
+  variant?: 'line' | 'flat';           // Grid style variant (default: "line")
+  color?: CSSProperties['color'];      // Guide color
+  zIndex?: number;                     // Z-index for layering
+}
+
+interface YGProps {
+  config: YGConfig;
+  visibility?: 'hidden' | 'visible';
+  className?: string;
+  style?: Partial<YGStyles>;
+}
+```
+
+#### Examples
+
+```tsx
+// Basic baseline grid
+<YGrid
+  config={{
+    baseUnit: 8,
+    height: "100%",
+  }}
+  visibility="visible"
+/>
+
+// Custom variant and color
+<YGrid
+  config={{
+    baseUnit: 8,
+    variant: "flat",
+    color: "rgba(255,0,0,0.1)",
+  }}
+  visibility="visible"
+/>
+```
+
+---
+
+### Spacer
+
+The Spacer component provides a flexible way to add spacing in your layouts.
+It adjusts its dimensions dynamically and supports optional measurement indicators for development.
+
+Use Spacer to manage dynamic spacing between elements, instead of wrapping your Stacks with useless noisy paddings.
+
+#### Props
+
+```typescript
+interface SpacerProps {
+  height?: CSSValue;                      // Height of the spacer
+  width?: CSSValue;                       // Width of the spacer
+  config?: {
+    baseUnit?: number;                    // Base unit for spacing (default: 8)
+    variant?: 'line';                     // Style variant for the spacer
+    color?: CSSProperties['color'];       // Color of the spacer
+    zIndex?: number;                      // Z-index for layering
+  };
+  indicatorNode?: (value: number, dimension: 'width' | 'height') => ReactNode; // Custom indicator renderer
+  visibility?: 'hidden' | 'visible';      // Visibility of the spacer
+  className?: string;                     // Additional class names
+  style?: CSSProperties;                  // Inline styles
+}
+```
+
+#### Examples
+
+```tsx
+// Simple spacer
+<Spacer
+  height="16px"
+  width="100%"
+  visibility="visible"
+/>
+
+// Spacer with custom configuration
+<Spacer
+  height="32px"
+  config={{
+    baseUnit: 8,
+    color: "#ff0000",
+  }}
+  visibility="visible"
+/>
+
+// Spacer with measurement indicators
+<Spacer
+  height="16px"
+  indicatorNode={(value, dimension) => (
+    <div>{`${dimension}: ${value}px`}</div>
+  )}
+  visibility="visible"
+/>
+```
+
+## Core Concepts
+
+### Grid Calculations
+
+#### 1. Fixed Columns:
+
+- Define a fixed number of equally-sized columns.
+- Example: columns: 12.
+
+#### 2. Pattern Columns:
+
+- Specify custom column widths.
+- Example: columns: ['64px', '1fr', '2fr'].
+
+#### 3. Auto-Calculated Columns:
+
+- Automatically calculate the number of columns based on container width and column width.
+- Example: columnWidth: '240px'.
+
+#### 4. Line Variant:
+
+- Single-pixel lines for precise alignment.
+- Example: variant: 'line'.
+
+---
+
+## Development Tips
+
+- **Color Usage:** Use low-opacity colors (e.g., rgba(255,0,0,0.1)) for better visibility.
+- **Performance:** Toggle grid visibility when not needed to avoid rendering overhead.
+- **Multiple Grids:** Combine XGrid, YGrid, and Spacer for comprehensive layout visualization.
+- **Debugging:** Use browser dev tools to inspect alignment and spacing.
+
+---
+
 ## Browser Support
 
-- Modern browsers (Chrome, Firefox, Safari, Edge)
-- CSS Grid Layout support required
-- CSS Custom Properties (CSS Variables) support required
+- Modern browsers (Chrome, Firefox, Safari, Edge).
+- Requires CSS Grid Layout and CSS Custom Properties support.
 
-## Contributing
+---
 
-See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
-
 ## License
 
 MIT © [François Denavaut](https://github.com/dnvt)

dist/types/index.d.ts

@@ -5,4 +5,3 @@ /**
  */
-export * from './common';
-export * from './styles';
-export * from './hook';
+export * from './components';
+export * from './hooks';

dist/utils/index.d.ts

@@ -6,4 +6,5 @@ /**
 export * from './validation';
-export * from './constants';
 export * from './styles';
 export * from './performance';
+export * from './measurement';
+export * from './units';

dist/utils/performance.d.ts

@@ -0,4 +1,34 @@
+/**
+ * Creates a debounced version of the provided function.
+ * The function will only execute after the specified delay has passed since the last call.
+ *
+ * @param fn - The function to debounce.
+ * @param delay - The delay in milliseconds.
+ * @returns A debounced version of the function.
+ */
 export declare function debounce<Callback extends (...args: unknown[]) => void>(fn: Callback, delay: number): (...args: Parameters<Callback>) => void;
+/**
+ * Creates a throttled version of the provided function using `requestAnimationFrame`.
+ * Ensures the function is executed at most once per animation frame.
+ *
+ * @param fn - The function to throttle.
+ * @returns A throttled version of the function.
+ */
 export declare function rafThrottle<Callback extends (...args: unknown[]) => void>(fn: Callback): (...args: Parameters<Callback>) => void;
+/**
+ * Clamps a number within the specified range.
+ *
+ * @param value - The number to clamp.
+ * @param min - The minimum allowable value.
+ * @param max - The maximum allowable value.
+ * @returns The clamped value.
+ */
 export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Rounds a number to the specified precision.
+ *
+ * @param value - The number to round.
+ * @param precision - The number of decimal places to round to (default is 0).
+ * @returns The rounded number.
+ */
 export declare const round: (value: number, precision?: number) => number;

dist/utils/styles.d.ts

@@ -1,5 +0,34 @@
-import type { CSSCustomProperties, CSSValue } from '@types';
-import type { CSSProperties } from 'react';
-export declare const combineClassNames: (...classes: Array<string | boolean | undefined | null>) => string;
-export declare const combineStyles: <T extends Partial<CSSProperties & CSSCustomProperties>>(...styles: Array<T | undefined>) => T;
-export declare const parseGridValue: (value: CSSValue | "auto") => string;
+import type { CSSValue } from '@types';
+import { CSSProperties } from 'react';
+/**
+ * Combines class names, filtering out falsy values.
+ * Useful for conditionally applying class names in React components.
+ *
+ * @param classes - An array of class names or falsy values (e.g., `null`, `undefined`, `false`).
+ * @returns A single string of class names, separated by spaces.
+ */
+export declare const cx: (...classes: Array<string | boolean | undefined | null>) => string;
+/**
+ * Combines multiple style objects into one, ensuring type safety.
+ * Useful for dynamically applying styles in React components.
+ *
+ * @param styles - An array of style objects or `undefined`.
+ * @returns A single combined style object.
+ */
+export declare const cs: <T extends CSSProperties>(...styles: Array<T | undefined>) => T;
+/**
+ * Parses a CSS value into a valid CSS string.
+ * Handles numeric values, relative units, grid units, and absolute units.
+ *
+ * @param value - The CSS value to parse (e.g., `px`, `em`, `rem`, `auto`, or a number).
+ * @returns A valid CSS string (e.g., `10px`, `auto`, `1em`).
+ */
+export declare const parseCSSValue: (value: CSSValue | undefined) => string;
+/**
+ * Extracts the numeric value from a CSS value.
+ * Converts relative and absolute units to pixels where possible.
+ *
+ * @param value - The CSS value to extract the number from (e.g., `10px`, `1em`, `auto`).
+ * @returns The numeric value as a number, or `0` if the value cannot be parsed.
+ */
+export declare const extractCSSNumber: (value: CSSValue) => number;

dist/utils/validation.d.ts

@@ -1,8 +0,50 @@
-import type { CSSValue, GridAlignment, GridColumnValue, GridColumnsPattern, GridConfig } from '@types';
+import { CSSValue, GridAlignment, GridColumnValue, GridColumnsPattern, GridConfig } from '@types';
+/**
+ * Validates if the given value is a valid grid column value.
+ *
+ * @param value - The value to validate.
+ * @returns `true` if the value is a valid grid column value, otherwise `false`.
+ */
 export declare const isValidGridColumnValue: (value: unknown) => value is GridColumnValue;
+/**
+ * Validates if the given pattern is a valid grid column pattern.
+ *
+ * @param pattern - The pattern to validate.
+ * @returns `true` if the pattern is a valid grid column pattern, otherwise `false`.
+ */
 export declare const isValidGridPattern: (pattern: unknown) => pattern is GridColumnsPattern;
+/**
+ * Validates if the given value is a valid CSS grid value.
+ *
+ * @param value - The value to validate.
+ * @returns `true` if the value is a valid CSS grid value, otherwise `false`.
+ */
 export declare const isGridValue: (value: unknown) => value is CSSValue;
+/**
+ * Validates if the given value is a valid grid alignment.
+ *
+ * @param value - The value to validate.
+ * @returns `true` if the value is a valid grid alignment, otherwise `false`.
+ */
 export declare const isGridAlignment: (value: unknown) => value is GridAlignment;
+/**
+ * Validates if the given configuration is a valid grid line configuration.
+ *
+ * @param config - The configuration to validate.
+ * @returns `true` if the configuration is a valid grid line configuration, otherwise `false`.
+ */
 export declare const isGridLineConfig: (config: unknown) => config is GridConfig;
+/**
+ * Validates if the given configuration is a valid grid column configuration.
+ *
+ * @param config - The configuration to validate.
+ * @returns `true` if the configuration is a valid grid column configuration, otherwise `false`.
+ */
 export declare const isGridColumnConfig: (config: unknown) => config is GridConfig;
+/**
+ * Validates if the given configuration is a valid auto-calculated grid configuration.
+ *
+ * @param config - The configuration to validate.
+ * @returns `true` if the configuration is a valid auto-calculated grid configuration, otherwise `false`.
+ */
 export declare const isAutoCalculatedGrid: (config: unknown) => config is GridConfig;

package.json

@@ -30,4 +30,3 @@ {
     "LICENSE",
-    "README.md",
-    "docs"
+    "README.md"
   ],
@@ -43,8 +42,10 @@ "engines": {
     "baseline",
+    "typography",
     "spacing",
+    "stack",
     "padding",
     "debug",
     "dev-tool",
-    "pixel",
-    "perfect"
+    "pixel-perfect",
+    "vertical-rhythm"
   ],
@@ -82,3 +83,3 @@ "repository": {
   "name": "padded-grid",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
@@ -108,3 +109,3 @@ "homepage": "https://github.com/dnvt/padded-grid#readme",
   "author": "Francois Denavaut",
-  "description": "A development tool for visualizing and maintaining consistent grid systems in React applications. Similar to design tools like Figma, it provides toggleable grid overlays that help ensure precise spacing, alignment, and layout consistency during development."
+  "description": "A comprehensive toolkit for maintaining consistent typography and spacing in React applications. Featuring debug overlays for grids and baselines, stack components for vertical rhythm, and spacing utilities that help ensure precise typography and layout during development."
 }

README.md

 # Padded Grid
 
-A development tool for visualizing and maintaining consistent grid systems in React applications. Similar to design
-tools like Figma, it provides toggleable grid overlays that help ensure precise spacing and alignment during
-development.
+Padded Grid is a lightweight, debugging / dev-tool library for visualizing and maintaining consistent grid systems in
+React applications. Inspired by tools like Figma, it provides powerful, customizable grid overlays and spacing utilities
+to ensure precise alignment and spacing during development.
 
 ## Features
 
-- 🎯 Interactive grid overlays for development
-- 📏 Column grid visualization (like Figma's layout grid)
-- 📐 Baseline grid for typography alignment
-- 🎚️ Toggleable grid visibility
-- 🎨 Customizable grid colors and opacity
-- 🔧 TypeScript-first with comprehensive types
-- ⚡️ Zero runtime dependencies
-- 🪶 Tree-shakeable & optimized bundle
+- 🎯 **Interactive Grid Overlays:** Toggleable grids for development.
+- 📏 **Column Grid Visualization:** Perfect for layout alignment.
+- 📐 **Baseline Grid Support:** Align typography and spacing.
+- 🧩 **Flexible Spacer Component:** Simplify spacing with adjustable dimensions.
+- 🎨 **Customizable:** Colors, opacity, and grid configurations.
+- ⚡ **Performance Optimized:** Zero runtime dependencies, tree-shakeable, and modern browser support.
+- 🔧 **TypeScript-First:** Comprehensive typings for better DX.
 
+## Installation
+
+Install via npm or yarn:
+
+```shell
+npm install padded-grid
+```
+
 ## Quick Start
 
+Add padded-grid to your React project to visualize grids and manage spacing during development:
+
 ```tsx
-import { XGrid, YGrid } from 'padded-grid';
+import { XGrid, YGrid, Spacer } from 'padded-grid';
 import 'padded-grid/styles.css';
@@ -48,2 +57,13 @@
 
+      {/* Spacer for dynamic spacing */}
+      <Spacer
+        height="16px"
+        width="100%"
+        config={{
+          baseUnit: 8,
+          color: "#ff0000",
+        }}
+        visibility="visible"
+      />
+
       <main>Your content...</main>
@@ -55,20 +75,207 @@ </div>
 
-## Documentation
+---
 
-- [Grid System Documentation](./docs/GRID_SYSTEM.md) - Core concepts and formulas
-- [Component API Reference](./docs/COMPONENTS.md) - Detailed component docs
-- [Examples & Use Cases](./docs/EXAMPLES.md) - Common patterns
+## Components
 
+### XGrid (Horizontal Grid)
+
+The XGrid component provides column-based grid overlays for layout visualization.
+
+#### Props
+
+```typescript
+interface XGConfig {
+  columns?: number | GridColumnsPattern; // Fixed number or pattern of columns
+  columnWidth?: CSSValue;               // For auto-calculated columns
+  gap?: CSSValue;                       // Gap between columns
+  align?: 'start' | 'center' | 'end';   // Grid alignment
+  color?: CSSProperties['color'];       // Guide color
+  maxWidth?: CSSValue;                  // Maximum grid width
+  padding?: CSSProperties['padding'];   // Grid padding
+  variant?: 'line';                     // Optional line variant
+  zIndex?: number;                      // Z-index for grid
+}
+
+interface XGProps {
+  config: XGConfig;
+  visibility?: 'hidden' | 'visible';
+  className?: string;
+  style?: Partial<XGStyles>;
+}
+```
+
+#### Examples
+
+```tsx
+// Fixed columns
+<XGrid
+  config={{
+    columns: 12,
+    gap: 16,
+    maxWidth: "1200px",
+  }}
+  visibility="visible"
+/>
+
+// Custom column pattern
+<XGrid
+  config={{
+    columns: ['64px', '1fr', '2fr', '1fr', '64px'],
+    gap: 24,
+    color: "#0000ff1a",
+  }}
+  visibility="visible"
+/>
+```
+
+---
+
+### YGrid (Vertical Grid)
+
+The YGrid component provides baseline grid overlays for typography alignment.
+
+#### Props
+
+```typescript
+interface YGConfig {
+  baseUnit?: number;                   // Base unit for spacing (default: 8)
+  height?: CSSValue;                   // Grid height (default: '100%')
+  variant?: 'line' | 'flat';           // Grid style variant (default: "line")
+  color?: CSSProperties['color'];      // Guide color
+  zIndex?: number;                     // Z-index for layering
+}
+
+interface YGProps {
+  config: YGConfig;
+  visibility?: 'hidden' | 'visible';
+  className?: string;
+  style?: Partial<YGStyles>;
+}
+```
+
+#### Examples
+
+```tsx
+// Basic baseline grid
+<YGrid
+  config={{
+    baseUnit: 8,
+    height: "100%",
+  }}
+  visibility="visible"
+/>
+
+// Custom variant and color
+<YGrid
+  config={{
+    baseUnit: 8,
+    variant: "flat",
+    color: "rgba(255,0,0,0.1)",
+  }}
+  visibility="visible"
+/>
+```
+
+---
+
+### Spacer
+
+The Spacer component provides a flexible way to add spacing in your layouts.
+It adjusts its dimensions dynamically and supports optional measurement indicators for development.
+
+Use Spacer to manage dynamic spacing between elements, instead of wrapping your Stacks with useless noisy paddings.
+
+#### Props
+
+```typescript
+interface SpacerProps {
+  height?: CSSValue;                      // Height of the spacer
+  width?: CSSValue;                       // Width of the spacer
+  config?: {
+    baseUnit?: number;                    // Base unit for spacing (default: 8)
+    variant?: 'line';                     // Style variant for the spacer
+    color?: CSSProperties['color'];       // Color of the spacer
+    zIndex?: number;                      // Z-index for layering
+  };
+  indicatorNode?: (value: number, dimension: 'width' | 'height') => ReactNode; // Custom indicator renderer
+  visibility?: 'hidden' | 'visible';      // Visibility of the spacer
+  className?: string;                     // Additional class names
+  style?: CSSProperties;                  // Inline styles
+}
+```
+
+#### Examples
+
+```tsx
+// Simple spacer
+<Spacer
+  height="16px"
+  width="100%"
+  visibility="visible"
+/>
+
+// Spacer with custom configuration
+<Spacer
+  height="32px"
+  config={{
+    baseUnit: 8,
+    color: "#ff0000",
+  }}
+  visibility="visible"
+/>
+
+// Spacer with measurement indicators
+<Spacer
+  height="16px"
+  indicatorNode={(value, dimension) => (
+    <div>{`${dimension}: ${value}px`}</div>
+  )}
+  visibility="visible"
+/>
+```
+
+## Core Concepts
+
+### Grid Calculations
+
+#### 1. Fixed Columns:
+
+- Define a fixed number of equally-sized columns.
+- Example: columns: 12.
+
+#### 2. Pattern Columns:
+
+- Specify custom column widths.
+- Example: columns: ['64px', '1fr', '2fr'].
+
+#### 3. Auto-Calculated Columns:
+
+- Automatically calculate the number of columns based on container width and column width.
+- Example: columnWidth: '240px'.
+
+#### 4. Line Variant:
+
+- Single-pixel lines for precise alignment.
+- Example: variant: 'line'.
+
+---
+
+## Development Tips
+
+- **Color Usage:** Use low-opacity colors (e.g., rgba(255,0,0,0.1)) for better visibility.
+- **Performance:** Toggle grid visibility when not needed to avoid rendering overhead.
+- **Multiple Grids:** Combine XGrid, YGrid, and Spacer for comprehensive layout visualization.
+- **Debugging:** Use browser dev tools to inspect alignment and spacing.
+
+---
+
 ## Browser Support
 
-- Modern browsers (Chrome, Firefox, Safari, Edge)
-- CSS Grid Layout support required
-- CSS Custom Properties (CSS Variables) support required
+- Modern browsers (Chrome, Firefox, Safari, Edge).
+- Requires CSS Grid Layout and CSS Custom Properties support.
 
-## Contributing
+---
 
-See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
-
 ## License
 
 MIT © [François Denavaut](https://github.com/dnvt)

No alert changes

Improved metrics

Lines of code

1754

increased by51.21%

Number of lines in readme file

280

increased by283.56%

Worsened metrics

Total package byte prevSize

301678

decreased by-77.34%

No dependency changes