From 6967d789d5b318548d3d11172d6d3188ec5fd337 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 15 Apr 2017 22:13:13 +0100 Subject: [PATCH] Fix #249 --- docs/documentation/grid/columns.html | 92 +++++++++++++++++++++++++++- 1 file changed, 91 insertions(+), 1 deletion(-) diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html index 10eace29..8d50203e 100644 --- a/docs/documentation/grid/columns.html +++ b/docs/documentation/grid/columns.html @@ -597,7 +597,97 @@ doc-subtab: columns
-

Multiline

+

Nesting

+
+

+ You can nest columns to have more flexibility in your design. You only need to follow this structure: +

+ +

+ The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result. +

+
+ +
+
+

First column

+
+
+

First nested column

+
+
+

Second nested column

+
+
+
+
+

Second column

+
+
+

50%

+
+
+

Auto

+
+
+

Auto

+
+
+
+
+ +{% highlight html %} +
+
+ First column +
+
+ First nested column +
+
+ Second nested column +
+
+
+
+ Second column +
+
+ 50% +
+
+ Auto +
+
+ Auto +
+
+
+
+{% endhighlight %} + +
+ +

Multiline

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.