From d662678ae577451788f395fc861a7f347d2d1864 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 19:25:49 -0400 Subject: [PATCH] Fix some stuff with things not wrapping right --- docs/source/grid.md | 248 +++++++++++++++++++++++++------------------- 1 file changed, 143 insertions(+), 105 deletions(-) diff --git a/docs/source/grid.md b/docs/source/grid.md index 4e3045d9f..3ca07b146 100644 --- a/docs/source/grid.md +++ b/docs/source/grid.md @@ -7,40 +7,46 @@ title: "Grid" Basic grid example: -
-
-
- .md:w-1/3 +
+
.flex.flex-wrap
+
+
+
+ .md:w-1/3 +
-
-
-
- .md:w-1/3 +
+
+ .md:w-1/3 +
-
-
-
- .md:w-1/3 +
+
+ .md:w-1/3 +
Columns don't need to fill a row: -
-
-
- .md:w-1/4 +
+
.flex
+
+
+
+ .md:w-1/4 +
-
-
-
- .md:w-1/4 +
+
+ .md:w-1/4 +
-
-
-
- .md:w-1/4 +
+
+ .md:w-1/4 +
@@ -48,20 +54,23 @@ Columns don't need to fill a row: Columns can be different widths: -
-
-
- .md:w-1/4 +
+
.flex
+
+
+
+ .md:w-1/4 +
-
-
-
- .md:w-1/2 +
+
+ .md:w-1/2 +
-
-
-
- .md:w-1/4 +
+
+ .md:w-1/4 +
@@ -69,30 +78,65 @@ Columns can be different widths: Rows can overflow and wrap: -
-
-
- .md:w-1/3 +
+
.flex.flex-wrap
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
-
-
- .md:w-1/3 +
+ +Columns can have gutters: + +
+
.flex.pull-x-4
+
+
+
+
.flex-none
+
.w-full
+
.md:w-1/3
+
.px-4
+
-
-
-
- .md:w-1/3 +
+
+
.flex-none
+
.w-full
+
.md:w-1/3
+
.px-4
+
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 +
+
+
.flex-none
+
.w-full
+
.md:w-1/3
+
.px-4
+
@@ -100,77 +144,72 @@ Rows can overflow and wrap: Column widths can be automatic: -
-
-
- .md:flex-fill +
+
.flex
+
+
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
- Fixed width columns are still respected even if a smaller screen has auto column widths: -
-
-
-
+
+
.flex
+
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
@@ -182,18 +221,17 @@ Fixed width columns are still respected even if a smaller screen has auto column Use margin auto utilities to accomplish offsets: -
-
-
-
+
+
.flex
+
+
+
.md:w-1/3
.md:ml-auto
-
-
-
-
+
+
.md:w-1/6
.md:mr-auto