One of the main purposes of Grid Mode is the general arrangement of your blocks. It’s not intended for setting the exact location of all of your elements. If you try to tweak the width of the grid columns to cause your blocks to be certain widths, you may end up frustrated.
After you’ve used Grid Mode to place your blocks, use Design Mode for more precise placement of the content. Setting values for the style attributes or groups of margin, padding, and nudging in Design Mode affects where exactly your content will be located when viewed in a browser. Here’s a guide for using these attributes.
But First: When to Use the Grid for Spacing
You may be concerned less with the exact spacing between blocks and more with how they sit relative to each other. If this is the case, arranging the blocks on the grid may be enough for you.
Further, the grid can be enough if you want blocks of varying widths arranged symmetrically. Adjusting the sides of each block the same number of grid columns can do the trick, and you don’t necessarily need to change margins or offsets. Here’s an example of a splash page with a slider where symmetrical blocks are varying widths.
Setting the margin property creates an empty area outside an element. The basic idea is to create space between elements. When you place a block on the grid, the left and right margins are set using the grid columns the block occupies, so in Design Mode, only the top and bottom margins can be set.
Use margins when you need the space to be outside of the element’s border or background image.
Setting block margins affects other blocks. The sum of all widths, left margins, and right margins of blocks arranged in a row can’t be more than the width of the grid. Otherwise, blocks will start being pushed down out of place because there isn’t enough room for all of them to fit side by side.
Padding is space within the element between its edge and its content. Padding doesn’t change the overall amount of space taken up by the element, so it’s useful when you need to add space around your content but don’t want to affect other elements. Further, use padding when you need space between a visible border and the content or when the element’s background image should also appear in the space.
The Nudging property group includes these properties:
- Vertical offset:
Nudges the block vertically by the number of pixels specified. Positive values move the block down, and negative values move it up. The offset provides an alternative to margins for pixel-perfect placement of blocks, and depending on the selected method, may not affect the placement of other blocks.
To quickly to nudge a block vertically once you have selected it in Design Mode, press the up or down arrow key to move it 1 pixel. Hold down Shift while using the arrow keys to nudge it 5 pixels at a time.
- Horizontal offset:
Nudges the block horizontally by the number of pixels specified. Positive values move the block right, and negative values move it left. The offset provides an alternative to margins for pixel-perfect placement of blocks, and depending on the selected method, may not affect the placement of other blocks.
To quickly to nudge a block horizontally once you have selected it in Design Mode, press the left or right arrow key to move it 1 pixel. Hold down Shift while using the arrow keys to nudge it 5 pixels at a time.
- Method: Sets the position property (see CSS Tricks for more information about this property). The method you select determines how the offset values work.
- Layer index (z-index):
Tells the browser how divs should be stacked. The higher the number, the greater the precedence the element takes over other elements. The element with the highest number overlaps everything else. This property doesn’t have any visible effect if divs aren’t going to overlap.
Though the grid doesn’t allow you to overlap blocks, you can use the nudging properties to make them overlap, such as a navigation block that covers part of the header block. For example, in Grid Mode, you would set blocks adjacent to each other. Then, in Design Mode, you would change their offset and z-index values so they overlap.