Fields grid support

server/documents/collections/form.html.eco

@@ -586,6 +586,27 @@ type        : 'UI Collection'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Fields Grid</h4>
+    <p>Fields can be aligned to 16-columns grid</p>
+    <div class="ui form">
+      <div class="fields grid">
+        <div class="four wide field">
+          <label>First name</label>
+          <input type="text" placeholder="First Name">
+        </div>
+        <div class="four wide field">
+          <label>Middle name</label>
+          <input type="text" placeholder="Middle Name">
+        </div>
+        <div class="eight wide field">
+          <label>Last name</label>
+          <input type="text" placeholder="Last Name">
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Grouped Fields</h4>
     <p>Fields can be grouped to show related choices</p>

src/collections/form.less

@@ -556,6 +556,61 @@
   padding-right: 1%;
 }
 
+/* Fields grid support */
+.ui.form .fields.grid > .field {
+  width: 6.25%;
+  padding-left: 1%;
+  padding-right: 1%;
+}
+.ui.form .fields.grid > .one.wide.field {
+  width: 6.25%;
+}
+.ui.form .fields.grid > .two.wide.field {
+  width: 12.5%;
+}
+.ui.form .fields.grid > .three.wide.field {
+  width: 18.75%;
+}
+.ui.form .fields.grid > .four.wide.field {
+  width: 25%;
+}
+.ui.form .fields.grid > .five.wide.field {
+  width: 31.25%;
+}
+.ui.form .fields.grid > .six.wide.field {
+  width: 37.5%;
+}
+.ui.form .fields.grid > .seven.wide.field {
+  width: 43.75%;
+}
+.ui.form .fields.grid > .eight.wide.field {
+  width: 50%;
+}
+.ui.form .fields.grid > .nine.wide.field {
+  width: 56.25%;
+}
+.ui.form .fields.grid > .ten.wide.field {
+  width: 62.5%;
+}
+.ui.form .fields.grid > .eleven.wide.field {
+  width: 68.75%;
+}
+.ui.form .fields.grid > .twelve.wide.field {
+  width: 75%;
+}
+.ui.form .fields.grid > .thirteen.wide.field {
+  width: 81.25%;
+}
+.ui.form .fields.grid > .fourteen.wide.field {
+  width: 87.5%;
+}
+.ui.form .fields.grid > .fifteen.wide.field {
+  width: 93.75%;
+}
+.ui.form .fields.grid > .sixteen.wide.field {
+  width: 100%;
+}
+
 /* Swap to full width on mobile */
 @media only screen and (max-width : 767px) {
   .ui.form .two.fields > .fields,
@@ -565,7 +620,23 @@
   .ui.form .four.fields > .fields,
   .ui.form .four.fields > .field,
   .ui.form .five.fields > .fields,
-  .ui.form .five.fields > .field {
+  .ui.form .five.fields > .field,
+  .ui.form .fields.grid > .one.wide.field,
+  .ui.form .fields.grid > .two.wide.field,
+  .ui.form .fields.grid > .three.wide.field,
+  .ui.form .fields.grid > .four.wide.field,
+  .ui.form .fields.grid > .five.wide.field,
+  .ui.form .fields.grid > .six.wide.field,
+  .ui.form .fields.grid > .seven.wide.field,
+  .ui.form .fields.grid > .eight.wide.field,
+  .ui.form .fields.grid > .nine.wide.field,
+  .ui.form .fields.grid > .ten.wide.field,
+  .ui.form .fields.grid > .eleven.wide.field,
+  .ui.form .fields.grid > .twelve.wide.field,
+  .ui.form .fields.grid > .thirteen.wide.field,
+  .ui.form .fields.grid > .fourteen.wide.field,
+  .ui.form .fields.grid > .fifteen.wide.field,
+  .ui.form .fields.grid > .sixteen.wide.field {
     width: 100%;
     padding-left: 0%;
     padding-right: 0%;
@@ -579,7 +650,6 @@
   padding-right: 0%;
 }
 
-
 /*--------------------
     Inline Fields
 ---------------------*/