There are two preset configurations layouts — two-column (using the class of ui-grid-a), and three-column (using the class of ui-grid-b) — that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.
To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a and add two child containers inside that are classed with ui-block-a for the first column and ui-block-b for the second:
To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a, and add two child containers inside it classed with ui-block-a for the first column and ui-block-b for the second:
<div class="ui-grid-a">
@@ -40,9 +40,9 @@
I'm Block B and text inside will wrap.
- As you see above, by default grid blocks have no style appearance; they simply present content side-by-side.
+ As you see above, by default grid blocks have no styles for appearance; they simply present content side-by-side.
- The grid classes can be applied to any container. In this next example, we add grid-a to a fieldset to make the two button inside stretch to 50% of the screen width:
+ Grid classes can be applied to any container. In this next example, we add ui-grid-a to a fieldset, and apply the ui-block classes to the two buttons inside to stretch them each to 50% of the screen width:
<fieldset class="ui-grid-a">