# Archify Grid Layout Default Dimensions and Margins Explained

> Understand Archify grid layout defaults. Discover cell dimensions 130x64px, margins 30px horizontal and 40px vertical, and origin [40, 80] from the tt-a1i/archify repository.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-07-15

---

**Archify's grid layout uses default cell dimensions of 130×64 pixels with horizontal margins of 30px and vertical margins of 40px, starting from an origin point of [40, 80].**

When generating architecture diagrams with the Archify open-source tool, understanding the default grid configuration is essential for precise component placement. The grid system is implemented in the `archify/renderers/architecture/grid.mjs` module and automatically applies sensible defaults when you enable grid mode without specifying custom parameters. These defaults control everything from cell sizing to spacing margins, ensuring consistent diagram layouts across your infrastructure visualizations.

## Default Grid Configuration in archify/renderers/architecture/grid.mjs

The `DEFAULT_GRID` constant in `archify/renderers/architecture/grid.mjs` defines the baseline configuration for all grid-based layouts. When a diagram uses `"mode": "grid"`, these values serve as the fallback for any unspecified properties.

| Property | Default Value | Description |
|----------|---------------|-------------|
| `origin` | `[40, 80]` | Top-left starting coordinates (x, y) in pixels |
| `cols` | `4` | Number of columns in the grid |
| `gapX` | `30` | Horizontal gap (margin) between adjacent cells |
| `gapY` | `40` | Vertical gap (margin) between rows |
| `cellW` | `130` | Width of each grid cell |
| `cellH` | `64` | Height of each grid cell |

## How the gridLayout() Function Applies Defaults

The `gridLayout()` function merges user-provided layout objects with the `DEFAULT_GRID` constant using object spreading. When `arch.layout.mode` equals `'grid'`, the function combines defaults with any user overrides, with user values taking precedence.

```javascript
// archify/renderers/architecture/grid.mjs
export function gridLayout(arch) {
  const raw = arch.layout;
  if (!raw || raw.mode !== 'grid') return null;
  // Merge user layout with defaults
  return { ...DEFAULT_GRID, ...raw };
}

```

This implementation ensures that you only need to specify the properties you want to change, while Archify automatically fills in the remaining default dimensions and margins.

## Configuring Grid Layouts in Archify

You can leverage these defaults in three progressive levels of customization depending on your diagram requirements.

### Using Default Grid Values Only

To rely entirely on Archify's default dimensions and margins, specify only the mode property:

```json
{
  "layout": { "mode": "grid" },
  "components": [
    { "id": "frontend", "row": 0, "col": 0 },
    { "id": "api", "row": 0, "col": 1 },
    { "id": "db", "row": 1, "col": 0 }
  ]
}

```

This configuration positions components starting at `[40, 80]` with 4 columns, 30px horizontal gaps, 40px vertical gaps, and cell dimensions of 130×64px.

### Overriding Specific Grid Parameters

Modify individual properties while retaining other defaults:

```json
{
  "layout": { "mode": "grid", "cols": 6 },
  "components": [
    { "id": "frontend", "row": 0, "col": 0 },
    { "id": "api", "row": 0, "col": 3 },
    { "id": "db", "row": 1, "col": 2 }
  ]
}

```

This example maintains the default origin, gaps, and cell dimensions but expands the grid to six columns.

### Complete Custom Grid Configuration

Replace all default values with custom dimensions:

```json
{
  "layout": {
    "mode": "grid",
    "origin": [20, 50],
    "cols": 5,
    "gapX": 15,
    "gapY": 25,
    "cellW": 150,
    "cellH": 80
  },
  "components": [
    { "id": "frontend", "row": 0, "col": 0 },
    { "id": "api", "row": 0, "col": 1 },
    { "id": "db", "row": 1, "col": 0 }
  ]
}

```

## Source Files and Implementation Details

The grid layout system spans several critical files in the Archify repository:

- **`archify/renderers/architecture/grid.mjs`** – Contains the `DEFAULT_GRID` constant and the `gridLayout()` function that executes the merging logic for default and custom values.

- **`archify/renderers/architecture/render-architecture.mjs`** – Calls `gridLayout()` during the rendering pipeline to calculate final component positions based on the merged configuration.

- **[`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md)** – Documents component sizing conventions and clarifies the distinction between grid-based placement and free placement modes.

## Summary

- **Default cell dimensions** are 130px wide by 64px high (`cellW: 130`, `cellH: 64`).
- **Default margins** are 30px horizontally (`gapX`) and 40px vertically (`gapY`).
- **Default origin** starts at coordinates `[40, 80]` with 4 columns (`cols: 4`).
- The `gridLayout()` function in `archify/renderers/architecture/grid.mjs` merges these defaults with user configurations using object spreading.
- You can override any combination of grid properties while keeping unspecified defaults intact.

## Frequently Asked Questions

### What are the default cell dimensions in Archify's grid layout?

The default cell dimensions are **130 pixels in width** and **64 pixels in height**, defined by the `cellW` and `cellH` properties in the `DEFAULT_GRID` constant. These values determine the size of each grid cell when the system calculates positioning for architecture components.

### How do I change the spacing between grid cells in Archify?

Modify the `gapX` (horizontal) and `gapY` (vertical) properties in your layout configuration to adjust spacing between cells. The default margins are 30px and 40px respectively, but you can override either value independently while retaining other defaults by including only the specific gap property in your layout object.

### Can I use Archify's grid layout without specifying any dimensions?

Yes, simply set `"mode": "grid"` in your layout configuration without including other properties. The `gridLayout()` function automatically applies all defaults from `DEFAULT_GRID`, including the origin point `[40, 80]`, four-column layout, cell dimensions, and spacing margins.

### Where is the grid layout logic implemented in the Archify source code?

The core logic resides in **`archify/renderers/architecture/grid.mjs`**, which exports both the `DEFAULT_GRID` constant and the `gridLayout()` function. The rendering pipeline in **`archify/renderers/architecture/render-architecture.mjs`** consumes this function to calculate final component positions during diagram generation.