You know how in Keynote or Powerpoint, when you drag elements around they snap to certain guidelines? Like, if you drag a text box close to the center of the slide, it'll snap to being exactly centered. Or if you drag something close to a margin, it'll snap to a standard distance from the edge.
A "constraint" captures a relationship such as those. "Block A is horizontally centered in its container." "Block B's right edge is 20 pixels from the right edge of its container".
The layout is then based on those captured relationships.
CSS sorta works like that too. The difference is that this system has one general thing (a constraint), where CSS has a lot of very specific interacting properties (margin, padding, etc).
A constraint has basically the form
y = m*x + b
where x and y are geometric attributes of blocks. For example,
blockA.left = 1 * blockB.right + 20
The = could also be <= or >=.
Last, you can say that a constraint should hold with strength one of {required, strong, medium, weak}. In this demo:
http://gridstylesheets.org/demos/apple/
the "Change Mode" button is weakly centered in the panel, but there is a required constraint that it be to the right of the "Add" button. So, when the panel gets too narrow, the "Change Mode" button stops being centered.
