diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index b8165a77a..d66d911b2 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -107,6 +107,44 @@ themes : ['Default'] +
+

Specifying Alignment

+

You can specify alignment using alignment variations on a grid, row, or column level.

+
+
Word Order Requirements
+

Keep in mind multi-word variations like right floated require you to specify both class names side-by-side, this helps preserve syntax when stacking variations like a right floated left aligned column

+
+ +
+
+
+ Right floated left aligned +
+
+
+
+ Left floated right aligned +
+
+
+
+
+ Center aligned row +
+
+
+
+ Center aligned row +
+
+
+
+
+ Right Aligned Grid +
+
+
+

Grid Row Spacing

@@ -286,37 +324,11 @@ themes : ['Default']

Full Width Backgrounds

-

Grids use negative margins to remove first and last column margins, this means you cannot directly apply a background color on a grid. To add a background try wrapping your grid inside another container.

+

Grids use negative margins to remove first and last column margins, this means you cannot directly apply a background color on a grid. To add a background try wrapping your grid inside another container, for example a ui segment.

Due to collapsing margins the parent container must have a clearfix, or overflow:hidden to prevent inheriting the grid's margins.
-
- -
-
-
-

Second Heading

-

Second section of content

-
-
-
-
-
-
-

Second Heading

-

Second section of content

-
-
-
-
-
+

Second Heading

@@ -324,7 +336,7 @@ themes : ['Default']
-
+

Second Heading

@@ -335,102 +347,41 @@ themes : ['Default']
-

Container Backgrounds

-

If you need to specify a background on the container, and a full width background, you can use a nested grid.

-
- -
-
-
-
-

First Heading

-

First section of content

-
-
-
-
-

Second Heading

-

Second section of content

-
-
-
-
-
-
-
-
-
-

First Heading

-

First section of content

-
-
-
-
-

Second Heading

-

Second section of content

-
-
-
+

Row and Column Backgrounds

+

If you need to specify colors on grid rows of columns, you can use a color variation

+
+

Using colored variations should use a padded grid variation to make sure that the grid knows to preserve column padding on colored backgrounds

-
- -
-

Padded Grids

-

When using grids with backgrounds you may not want the grid contents to sit flush with the edge of its parent containers, to fix this you need to use the padded grid variation, or specify a padding on your parent container.

-
-
-
-
-

First Heading

-

First section of content

-
+
+
+
+

First Heading

+

First section of content

-
-
-

Second Heading

-

Second section of content

-
+
+

First Heading

+

First section of content

-
-
-
-
-
+

Second Heading

Second section of content

-
-
-
-
-

Second Heading

-

Second section of content

-
+
+

Second Heading

+

Second section of content

+
+
+

Second Heading

+

Second section of content

-

Types