From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/layout/grid.html | 415 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 415 insertions(+) create mode 100644 docs/layout/grid.html (limited to 'docs/layout/grid.html') diff --git a/docs/layout/grid.html b/docs/layout/grid.html new file mode 100644 index 0000000..1a07af1 --- /dev/null +++ b/docs/layout/grid.html @@ -0,0 +1,415 @@ + + + + Flexbox grid - Layout - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Flexbox grid

+
+
+ + + +
+
+ + +
+
+

Layout includes flexbox based responsive grid system with 12 columns.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
col-12 (100%)
+
+
+
+
+
col-9 (75%)
+
+
+
+
+
col-6 (50%)
+
+
+
+
+
col-3 (25%)
+
+
+ 
<!-- flexbox grid example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-6">col-6</div>
+    <div class="column col-3">col-3</div>
+    <div class="column col-2">col-2</div>
+    <div class="column col-1">col-1</div>
+  </div>
+</div>
+
+

Add the columns class to a container with the container class. + And add any element you want with the column class inside the container. These columns will take up the space equally. + You can specific the width of each column by adding class col-<1-12>. +

+

And you can add the col-gapless class to the columns to have gapless columns.

+
+
+
col-6 (gapless)
+
+
+
col-6 (gapless)
+
+
+ 
<!-- gapless columns -->
+<div class="columns col-gapless">
+  <div class="column col-6">col-6</div>
+  <div class="column col-6">col-6</div>
+</div>
+
+

By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.

+
+
+
col-8
+
+
+
col-8
+
+
+ 
<!-- one line columns -->
+<div class="columns col-oneline">
+  <div class="column col-8">col-8</div>
+  <div class="column col-8">col-8</div>
+</div>
+
+

Grid offset

+

+ The Flexbox grid provides margin auto utilities to set offset. + There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns. +

+
+
+
col-2
+
+
+
col-4 col-mx-auto
+
+
+
+
+
col-2
+
+
+
col-4 col-ml-auto
+
+
+
+
+
col-4 col-ml-auto
+
+
+
col-2
+
+
+
+
+
col-4 col-mx-auto
+
+
+
col-2
+
+
+
+
+
col-4 col-mr-auto
+
+
+
col-2
+
+
+
+
+
col-4 col-mx-auto
+
+
+ 
<!-- grid offset example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
+    <div class="column col-2">col-2</div>
+  </div>
+</div>
+
+

Grid nesting

+

To nest grids, add the new columns and column structure within an existing column.

+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
+
+
col-6
+
+
+ 
<!-- grid nesting example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-6">col-6
+      <div class="columns">
+        <div class="column col-6">col-6</div>
+        <div class="column col-6">col-6</div>
+      </div>
+    </div>
+    <div class="column col-6">col-6</div>
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d