From 1a117648bc121b7dbd2c039a0da37986e66a7088 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 25 Mar 2015 11:49:19 -0400 Subject: [PATCH] Update grid examples --- examples/grid.html | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/examples/grid.html b/examples/grid.html index 26d8f6650..e3b9f6db0 100644 --- a/examples/grid.html +++ b/examples/grid.html @@ -7,7 +7,7 @@ - Fixed Menu Example - Semantic + Grid Example - Semantic @@ -118,6 +118,24 @@ +

Specifying Row Width

+

Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.

+
+
column
+
column
+
column
+
column
+
column
+
column
+
+ +

Specifying Column Width

+

You can also specify column widths for each column individually

+
+
four wide column
+
eight wide column
+
four wide column
+

Special Variations

Some special variations that format grids like tables require you to specify rows. For example a divided grid or a celled grid requires row wrappers.

@@ -193,7 +211,7 @@

Adjusting Grids

-

Centering Content

+

Centering Content

If a row does not take up all sixteen grid columns, you can use a ui centered grid, centered row, or centered column to center the column contents inside the grid.

@@ -261,17 +279,6 @@
-

Specifying Column Count

-

Specifying a column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.

-
-
column
-
column
-
column
-
column
-
column
-
column
-
-

Equal Width Columns

Specifying an equal width grid will automatically determine column sizes to fit evenly inside one row

@@ -288,16 +295,10 @@
-

Individual Column Width

-
-
four wide column
-
eight wide column
-
four wide column
-

Responsive Patterns

-

Doubling

+

Doubling

You can set columns to double in width at each device jump

column