It replaces browser layout engine with it's own. Layout engine is the thing that computes where and how elements should be drawn on a web page. If you inspect the web page, all elements are absolutely positioned and the positions are calculated in JS.
okay simple from mobile web apps its a way to native layout like the mobile apps do but in css..ie one step closer to full parity between native mobile apps and mobile web apps
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.
