Margin rule

Adjust margins for text, icons, and other graphics across rules.

The Margin rule lets you add margins to pretty much anything in Grunt. This includes text, icons, shapes, images and more. By adding a margin, you restrict how large something can grow. A Margin rule will typically affect everything added to those cells, unless the margin or size is explicitly overridden in the other rules (e.g. a Shape rule where you manually change the margin or size).

A note on margins

Whenever you write text or add graphics inside a Visual Grid, there will be a 4-pixel margin around it by default. This means that it won't, so to speak, "touch" the boundaries of the cell. You can change this margin to whatever you like by adding a Margin rule, sticking it at the bottom of the stack, and targeting either graphics or text (or both by holding the Shift key and clicking them). 

Most visual rules such as those that produce icons, shapes, images, flags, and charts have settings for margin, size, and alignment. That means that you can adjust all of them individually for each rule. Doing so will override the Margin rule. Remember, whatever is furthest up in the Rule Stack will "win". If for some reason changing the size or margin in one of your rules doesn't seem to have an effect, check if there are any Margin rule anywhere that affect the same thing you're trying to change.

Another technical detail: margins aren't additive, meaning that if you have two shapes created by separate rules next to each other and one has a margin set to 4 and the other to 6, the margins between them won't be 10 - it will be 6. Grunt just chooses the one with the largest margin and uses that.

What can you change


The Direction setting lets you change in which directions the rule should apply, i.e. in all directions, vertically, horizontally, or in each direction individually.