At some point you will likely want to repeat a command or sequence of commands. Grid notation notation commands can be suffixed with an asterisk
* and an optional number to indicate the number of times to repeat a command. When a number of iterations is provided, this is called a multiple. If no number is provided, this is called a fill.
In words: “Repeat this command this many times”
A command followed by an asterisk
* and a number is called a “multiple”. GuideGuide will repeat the command the number of times indicated.
# Put three 10px commands between two guides | 10px*3 |
The grid above is equivalent to:
| 10px 10px 10px |
This technique combined with wildcards can be helpful for expressing proportions.
# This will put a guide 1:4 of the way from the top. ~ | ~*3
Multiples are most effective combined with variables. For example, to create rows with padding:
# Define our row with padding $ = | 40px | ~ | 40px | # Repeat it three times $*3
This is equivalent to:
| 40px | ~ | 40px | 40px | ~ | 40px | 40px | ~ | 40px |
In words: “Repeat this command until there is no space left”
You may find that you would like fill an area with as many of a command or sequence commands that will fit. A command followed by an asterisk
* without a number after it is called a “fill” and will do exactly that.
For example, a baseline grid is a sequence of rows of a specific height repeated as many times as will fit.
# Define our row commands $row = | 24px | # Fill the space with them $row*
A fill is a command followed by an asterisk
*. GuideGuide will repeat a fill command as until it fills the entire context. This is useful for creating baseline grids, or filling space with columns and gutters.
How fills are calculated
GuideGuide subtracts the size of all unit commands that are not part of a fill from the available space of the grid. It then calculates the size of the fill and divides the remaining space by this value.
A fill will appear at least once. Wildcards are calculated before fills, so when used together, only one instance of the fill will appear because the wildcards takes up all the remaining space.
Wildcards cannot be used as fills. Doing so will cause an Unexpected Fill error. This is because wildcards do not have an intrinsic size, which would mean using them as a fill would create a division by infinity.
Variable that contains wildcard commands may not be used as fills. Doing so will cause an error.
Grids cannot contain more than one fill.