GRid

พื้นที่ทำงานหลักของ Blockly อาจมีตารางกริด (ไม่บังคับ) บล็อกสามารถสแนปกับตารางกริด ซึ่งทำให้เลย์เอาต์ดูสะอาดตาขึ้น ความสามารถนี้มีประโยชน์อย่างยิ่งในแอปพลิเคชันขนาดใหญ่ที่มีการจัดกลุ่มโค้ดหลายรายการกระจายอยู่เป็นบริเวณกว้าง

การตั้งค่าของตารางกริดจะกำหนดโดยออบเจ็กต์ที่เป็นส่วนหนึ่งของการกำหนดค่าของ Blockly มีตัวอย่างดังต่อไปนี้

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     grid:
         {spacing: 20,
          length: 3,
          colour: '#ccc',
          snap: true},
     trashcan: true});

การเว้นพื้นที่

คุณสมบัติของตารางกริดที่สำคัญที่สุดคือ spacing ซึ่งกำหนดระยะทางระหว่างจุดของตารางกริด ค่าเริ่มต้นคือ 0 ซึ่งทำให้ไม่มีตารางกริด ต่อไปนี้คือตัวอย่างของ spacing ที่ตั้งค่าเป็น 10, 20 และ 40

ความยาว

พร็อพเพอร์ตี้ length เป็นตัวเลขที่กำหนดรูปร่างของจุดตารางกริด ความยาวเป็น 0 จะส่งผลให้เกิดเส้นตารางที่มองไม่เห็น (แต่ยังคงเป็นตารางที่อาจสแนปไว้) ความยาว 1 (ค่าเริ่มต้น) จะส่งผลให้เกิดจุด ความยาวที่นานกว่าจะส่งผลให้เกิดเส้นกากบาท และความยาวเท่ากับหรือมากกว่าช่องว่างระหว่างกระดาษกราฟ ตัวอย่างการตั้งค่า length เป็น 1, 5 และ 20

สี

พร็อพเพอร์ตี้ colour เป็นสตริงที่กำหนดสีของจุด โปรดสังเกตการสะกดคำแบบบริติช ใช้รูปแบบที่เข้ากันได้กับ CSS รวมถึง #f00, #ff0000 หรือ rgb(255, 0, 0) ค่าเริ่มต้นคือ #888 ต่อไปนี้คือตัวอย่างของ colour ที่ตั้งค่าเป็น #000, #ccc และ #f00

สแนป

พร็อพเพอร์ตี้ snap เป็นบูลีนที่กำหนดว่าจะให้บล็อกสแนปไปยังจุดตารางกริดที่ใกล้ที่สุดเมื่อวางในพื้นที่ทำงานหรือไม่ ค่าเริ่มต้นคือ false