From 0173292ce4fc6083333ea67f474a8b7cf08dec6b Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 9 Jun 2015 18:46:15 -0400 Subject: [PATCH] Fix grid example --- examples/grid.html | 50 +++++++++------------------------------------- 1 file changed, 9 insertions(+), 41 deletions(-) diff --git a/examples/grid.html b/examples/grid.html index b39c27797..2a0a80ada 100644 --- a/examples/grid.html +++ b/examples/grid.html @@ -20,7 +20,7 @@
-

Using Grids

+

Using Grids

Container

A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid. @@ -48,32 +48,6 @@

-
- -

Page Grid

-

A page grid uses padding to create fluid page gutters. Each columns width will continuously adjust as your browser width changes to maintain the same percentage of overall browser width.

-

A page grid adjusts its gutters as a percentage of total page width for each device. This causes it to snap to a new width on each breakpoint.

-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

Text Container

Sometimes you just need to put a single column of centered text on a page. A text container is a special type of container optimized for a single flowing column of text, like this instructions on this page. @@ -90,7 +64,7 @@

-

Grid Content

+

Grid Content

Column Flow

A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.

@@ -208,7 +182,7 @@
-

Adjusting Grids

+

Adjusting Grids

Centering Content

@@ -251,14 +225,14 @@
- Center aligned row + center aligned row
- Center aligned row + center aligned row
-
- Right Aligned Grid +
+ right aligned column
@@ -372,20 +346,14 @@ code { .container { padding: 5em 0em; } -.ui.block.header, +.ui.dividing.header, .first { margin-top: 5em; } -.ui.block.header:first-child { +.ui.dividing.header:first-child { margin-top: 0em; } -.ui.block.header { - margin-left: -4rem; - margin-right: -4rem; - padding-left: 4rem; - padding-right: 4rem; -} h1, h3 {