[{"data":1,"prerenderedAt":94},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayout-grid":3},{"id":4,"title":5,"body":6,"category":82,"description":83,"extension":84,"keywords":85,"meta":86,"navigation":87,"order":88,"path":89,"seo":90,"stem":91,"updated":92,"__hash__":93},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayout-grid.md","Layout grid",{"type":7,"value":8,"toc":75},"minimark",[9,13,18,26,33,37,48,52,63,68,72],[10,11,12],"p",{},"The layout grid is a set of guide lines that elements snap to, so things stay aligned no matter what content fills your template.",[14,15,17],"h2",{"id":16},"show-the-grid","Show the grid",[10,19,20,21,25],{},"Click the grid button in the ",[22,23,24],"strong",{},"Toolbar"," to show or hide the grid and its rulers.",[10,27,28],{},[29,30],"img",{"alt":31,"src":32},"","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F2463f611-c20f-4c75-8b91-b857c94c4600\u002Fmax",[14,34,36],{"id":35},"add-a-grid-line","Add a grid line",[10,38,39,40,43,44,47],{},"With the grid shown, click on a ruler to add a guide line: the ",[22,41,42],{},"top"," ruler adds a vertical line, the ",[22,45,46],{},"left"," ruler adds a horizontal one.",[14,49,51],{"id":50},"move-or-edit-a-grid-line","Move or edit a grid line",[10,53,54,55,58,59,62],{},"Drag a grid line to reposition it. To set an exact position or remove it, ",[22,56,57],{},"double-click"," the line directly on the ruler to open its editor, where you can type its position in pixels or ",[22,60,61],{},"Delete"," it.",[10,64,65],{},[29,66],{"alt":31,"src":67},"https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F70d03d1a-5914-4c5e-621b-67e1fbf50a00\u002Fmax",[14,69,71],{"id":70},"snapping","Snapping",[10,73,74],{},"When you drag an element near a grid line, its edge snaps to the line. That keeps elements aligned to the same guides across every version of your design.",{"title":31,"searchDepth":76,"depth":76,"links":77},2,[78,79,80,81],{"id":16,"depth":76,"text":17},{"id":35,"depth":76,"text":36},{"id":50,"depth":76,"text":51},{"id":70,"depth":76,"text":71},"design-elements-and-tools","Set up snap-to grids and guides so elements line up consistently across every variation users produce.","md",[],{},true,40,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayout-grid",{"title":5,"description":83},"help\u002Fdesign-elements-and-tools\u002Flayout-grid","2026-06-12","MCITBQjVx1gqTmJ-5wb8LMfabUWMjm8HYYpRragFJFw",1787923688715]