Grid option
Stay organized with collections
Save and categorize content based on your preferences.
Blockly's main workspace may optionally have a grid. Blocks can be made to
snap to the grid, enabling cleaner layout. This is particularly helpful in
larger applications with multiple code groupings spread out over a
large area.
The grid's settings are defined by an object that is part of Blockly's
configuration
options.
Here is an example:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
grid:
{spacing: 20,
length: 3,
colour: '#ccc',
snap: true},
trashcan: true});
Spacing
The most important grid property is spacing which defines the distance
between the grid's points. The default value is 0, which results in no grid.
Here are examples of spacing set to 10, 20, and 40:
Length
The length property is a number that defines the shape of the grid points.
A length of 0 results in an invisible grid (but still one that may be snapped
to), a length of 1 (the default value) results in dots, a longer length results
in crosses, and a length equal or greater than the spacing results in graph
paper. Here are examples of length set to 1, 5, and 20:
Colour
The colour property is a string that sets the colour of the points.
Note the British spelling. Use any CSS-compatible format, including #f00,
#ff0000, or rgb(255, 0, 0). The default value is #888.
Here are examples of colour set to #000, #ccc, and #f00:
Snap
The snap property is a boolean that sets whether blocks should snap to the
nearest grid point when placed on the workspace. The default value is false.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-06-13 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-06-13 UTC."],[[["\u003cp\u003eBlockly workspaces can have an optional grid to help organize blocks, especially in larger projects.\u003c/p\u003e\n"],["\u003cp\u003eThe grid is customizable with properties like spacing, length, color, and snap, which are configured within Blockly's options.\u003c/p\u003e\n"],["\u003cp\u003eGrid spacing controls the distance between grid points, length determines the visual shape of grid points, color sets the color of the grid, and snap enables or disables block snapping to the grid.\u003c/p\u003e\n"]]],["Blockly's workspace grid is configured via `spacing`, `length`, `colour`, and `snap` properties within the workspace configuration. `Spacing` defines the distance between grid points, with a default of 0 (no grid). `Length` shapes the grid points (dots, crosses, or graph paper). `Colour` sets the grid's color using CSS formats. `Snap` determines if blocks align to the grid, defaulting to `false`. Activating snap enables a more organized layout.\n"],null,["# Grid option\n\nBlockly's main workspace may optionally have a grid. Blocks can be made to\nsnap to the grid, enabling cleaner layout. This is particularly helpful in\nlarger applications with multiple code groupings spread out over a\nlarge area.\n\nThe grid's settings are defined by an object that is part of Blockly's\n[configuration\noptions](/blockly/guides/configure/web/configuration_struct#the_options_dictionary).\nHere is an example: \n\n```gdscript\nvar workspace = Blockly.inject('blocklyDiv',\n {toolbox: document.getElementById('toolbox'),\n grid:\n {spacing: 20,\n length: 3,\n colour: '#ccc',\n snap: true},\n trashcan: true});\n```\n\nSpacing\n-------\n\nThe most important grid property is `spacing` which defines the distance\nbetween the grid's points. The default value is 0, which results in no grid.\nHere are examples of `spacing` set to 10, 20, and 40:\n\nLength\n------\n\nThe `length` property is a number that defines the shape of the grid points.\nA length of 0 results in an invisible grid (but still one that may be snapped\nto), a length of 1 (the default value) results in dots, a longer length results\nin crosses, and a length equal or greater than the spacing results in graph\npaper. Here are examples of `length` set to 1, 5, and 20:\n\nColour\n------\n\nThe `colour` property is a string that sets the colour of the points.\nNote the British spelling. Use any CSS-compatible format, including `#f00`,\n`#ff0000`, or `rgb(255, 0, 0)`. The default value is `#888`.\nHere are examples of `colour` set to `#000`, `#ccc`, and `#f00`:\n\nSnap\n----\n\nThe `snap` property is a boolean that sets whether blocks should snap to the\nnearest grid point when placed on the workspace. The default value is `false`."]]
