From f38d8c74a3abdeb84b6f98e1471522550577dbba Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 29 May 2013 11:14:31 -0400 Subject: [PATCH] updates columns to sixteen Former-commit-id: a37c72b2231b5bc0136539acafa2d94282624b66 Former-commit-id: 5517a351fef62c6c8fd7b22f018a682485214573 --- build/minified/collections/grid.min.css | 2 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/uncompressed/collections/grid.css | 55 ++++++++++++---- node/src/documents/collections/grid.html | 66 ++++++++++++++++++- .../components/semantic/collections/grid.css | 55 ++++++++++++---- node/src/files/stylesheets/semantic.css | 4 +- src/collections/grid.less | 66 ++++++++++++------- 7 files changed, 190 insertions(+), 60 deletions(-) diff --git a/build/minified/collections/grid.min.css b/build/minified/collections/grid.min.css index e26f20797..26d2836af 100644 --- a/build/minified/collections/grid.min.css +++ b/build/minified/collections/grid.min.css @@ -1 +1 @@ -.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{display:table;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row{display:table}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{display:block!important;width:auto!important;margin:1.5em 3em 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid>.row:first-child>.column:first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}} \ No newline at end of file +.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1%;padding-right:1%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:6.25%}.ui.grid .two.wide.column{width:12.5%}.ui.grid .three.wide.column{width:18.75%}.ui.grid .four.wide.column{width:25%}.ui.grid .five.wide.column{width:31.25%}.ui.grid .six.wide.column{width:37.5%}.ui.grid .seven.wide.column{width:43.75%}.ui.grid .eight.wide.column{width:50%}.ui.grid .nine.wide.column{width:56.25%}.ui.grid .ten.wide.column{width:62.5}.ui.grid .eleven.wide.column{width:68.75}.ui.grid .twelve.wide.column{width:75%}.ui.grid .thirteen.wide.column{width:81.25%}.ui.grid .fourteen.wide.column{width:87.5%}.ui.grid .fifteen.wide.column{width:93.75%}.ui.grid .sixteen.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:6.25%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.twelve.column.grid .column{width:8.3333%}.ui.thirteen.column.grid .column{width:7.6923%}.ui.fourteen.column.grid .column{width:7.1428%}.ui.fifteen.column.grid .column{width:6.6666%}.ui.sixteen.column.grid .column{width:6.25%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{display:table;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row{display:table}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{display:block!important;width:auto!important;margin:1.5em 3em 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid>.row:first-child>.column:first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index d9221fb32..86267a956 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -6cf94be31bed8e8026b857cacec719ee0ca0f2ba \ No newline at end of file +c37ad5b5b0d4ba307aa9c800adb0f31425e070a1 \ No newline at end of file diff --git a/build/uncompressed/collections/grid.css b/build/uncompressed/collections/grid.css index 89bcf27d5..81b6de83d 100644 --- a/build/uncompressed/collections/grid.css +++ b/build/uncompressed/collections/grid.css @@ -39,8 +39,8 @@ display: inline-block; text-align: left; font-size: 1rem; - padding-left: 1.33%; - padding-right: 1.33%; + padding-left: 1%; + padding-right: 1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -121,39 +121,51 @@ --------------------*/ /* Sizing Combinations */ .ui.grid .one.wide.column { - width: 8.3333%; + width: 6.25%; } .ui.grid .two.wide.column { - width: 16.66667%; + width: 12.5%; } .ui.grid .three.wide.column { - width: 25%; + width: 18.75%; } .ui.grid .four.wide.column { - width: 33.3333%; + width: 25%; } .ui.grid .five.wide.column { - width: 41.6666%; + width: 31.25%; } .ui.grid .six.wide.column { - width: 50%; + width: 37.5%; } .ui.grid .seven.wide.column { - width: 58.3333%; + width: 43.75%; } .ui.grid .eight.wide.column { - width: 66.6666%; + width: 50%; } .ui.grid .nine.wide.column { - width: 75%; + width: 56.25%; } .ui.grid .ten.wide.column { - width: 83.3333%; + width: 62.5; } .ui.grid .eleven.wide.column { - width: 91.666%; + width: 68.75; } .ui.grid .twelve.wide.column { + width: 75%; +} +.ui.grid .thirteen.wide.column { + width: 81.25%; +} +.ui.grid .fourteen.wide.column { + width: 87.5%; +} +.ui.grid .fifteen.wide.column { + width: 93.75%; +} +.ui.grid .sixteen.wide.column { width: 100%; } /*------------------- @@ -162,7 +174,7 @@ /* Standard */ .ui.grid > .column, .ui.grid > .row > .column { - width: 8.3333%; + width: 6.25%; } /* Assume full width with one column */ .ui.grid > .column:only-child, @@ -199,6 +211,21 @@ .ui.eleven.column.grid .column { width: 9.0909%; } +.ui.twelve.column.grid .column { + width: 8.3333%; +} +.ui.thirteen.column.grid .column { + width: 7.6923%; +} +.ui.fourteen.column.grid .column { + width: 7.1428%; +} +.ui.fifteen.column.grid .column { + width: 6.6666%; +} +.ui.sixteen.column.grid .column { + width: 6.25%; +} /*------------------- Padded --------------------*/ diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index 94955c397..76aae599d 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -24,9 +24,9 @@ type : 'UI Collection'

A grid is made up of columns of content. By default a grid must assume a certain number of columns.

Each set of columns matching up to the number of columns in a grid create a row.

-
Using Grids -

The semantic library assumes 12 columns by default. If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a one wide column

-

It is also important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.

+
Column Count

All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns

+
Using Grids +

It is important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.

@@ -88,6 +88,26 @@ type : 'UI Collection' 12
+
+
+ 13 +
+
+
+
+ 14 +
+
+
+
+ 15 +
+
+
+
+ 16 +
+
@@ -188,6 +208,26 @@ type : 'UI Collection' 12a +
+
+ 13a +
+
+
+
+ 14a +
+
+
+
+ 15a +
+
+
+
+ 16a +
+
@@ -250,6 +290,26 @@ type : 'UI Collection' 12b
+
+
+ 13b +
+
+
+
+ 14b +
+
+
+
+ 15b +
+
+
+
+ 16b +
+
diff --git a/node/src/files/components/semantic/collections/grid.css b/node/src/files/components/semantic/collections/grid.css index 89bcf27d5..81b6de83d 100644 --- a/node/src/files/components/semantic/collections/grid.css +++ b/node/src/files/components/semantic/collections/grid.css @@ -39,8 +39,8 @@ display: inline-block; text-align: left; font-size: 1rem; - padding-left: 1.33%; - padding-right: 1.33%; + padding-left: 1%; + padding-right: 1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -121,39 +121,51 @@ --------------------*/ /* Sizing Combinations */ .ui.grid .one.wide.column { - width: 8.3333%; + width: 6.25%; } .ui.grid .two.wide.column { - width: 16.66667%; + width: 12.5%; } .ui.grid .three.wide.column { - width: 25%; + width: 18.75%; } .ui.grid .four.wide.column { - width: 33.3333%; + width: 25%; } .ui.grid .five.wide.column { - width: 41.6666%; + width: 31.25%; } .ui.grid .six.wide.column { - width: 50%; + width: 37.5%; } .ui.grid .seven.wide.column { - width: 58.3333%; + width: 43.75%; } .ui.grid .eight.wide.column { - width: 66.6666%; + width: 50%; } .ui.grid .nine.wide.column { - width: 75%; + width: 56.25%; } .ui.grid .ten.wide.column { - width: 83.3333%; + width: 62.5; } .ui.grid .eleven.wide.column { - width: 91.666%; + width: 68.75; } .ui.grid .twelve.wide.column { + width: 75%; +} +.ui.grid .thirteen.wide.column { + width: 81.25%; +} +.ui.grid .fourteen.wide.column { + width: 87.5%; +} +.ui.grid .fifteen.wide.column { + width: 93.75%; +} +.ui.grid .sixteen.wide.column { width: 100%; } /*------------------- @@ -162,7 +174,7 @@ /* Standard */ .ui.grid > .column, .ui.grid > .row > .column { - width: 8.3333%; + width: 6.25%; } /* Assume full width with one column */ .ui.grid > .column:only-child, @@ -199,6 +211,21 @@ .ui.eleven.column.grid .column { width: 9.0909%; } +.ui.twelve.column.grid .column { + width: 8.3333%; +} +.ui.thirteen.column.grid .column { + width: 7.6923%; +} +.ui.fourteen.column.grid .column { + width: 7.1428%; +} +.ui.fifteen.column.grid .column { + width: 6.6666%; +} +.ui.sixteen.column.grid .column { + width: 6.25%; +} /*------------------- Padded --------------------*/ diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 50ff67d16..d78efc751 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -806,8 +806,8 @@ a:hover { } #example .highlighted.example .grid, #example .ui.type.items .image .grid { - -webkit-animation: grid 5s ease-in-out infinite; - -moz-animation: grid 5s ease-in-out infinite; + -webkit-animation: grid 15s ease infinite; + -moz-animation: grid 15s ease infinite; background-color: #F6F6F6; margin: 0em auto; } diff --git a/src/collections/grid.less b/src/collections/grid.less index 2d7caa75b..359b07e00 100755 --- a/src/collections/grid.less +++ b/src/collections/grid.less @@ -47,8 +47,8 @@ text-align: left; font-size: 1rem; - padding-left: 1.33%; - padding-right: 1.33%; + padding-left: 1%; + padding-right: 1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -164,42 +164,53 @@ Column Width --------------------*/ - /* Sizing Combinations */ .ui.grid .one.wide.column { - width: 8.3333%; + width: 6.25%; } .ui.grid .two.wide.column { - width: 16.66667%; + width: 12.5%; } .ui.grid .three.wide.column { - width: 25%; + width: 18.75%; } .ui.grid .four.wide.column { - width: 33.3333%; + width: 25%; } .ui.grid .five.wide.column { - width: 41.6666%; + width: 31.25%; } .ui.grid .six.wide.column { - width: 50%; + width: 37.5%; } .ui.grid .seven.wide.column { - width: 58.3333%; + width: 43.75%; } .ui.grid .eight.wide.column { - width: 66.6666%; + width: 50%; } .ui.grid .nine.wide.column { - width: 75%; + width: 56.25%; } .ui.grid .ten.wide.column { - width: 83.3333%; + width: 62.5; } .ui.grid .eleven.wide.column { - width: 91.666%; + width: 68.75; } .ui.grid .twelve.wide.column { + width: 75%; +} +.ui.grid .thirteen.wide.column { + width: 81.25%; +} +.ui.grid .fourteen.wide.column { + width: 87.5%; +} +.ui.grid .fifteen.wide.column { + width: 93.75%; +} +.ui.grid .sixteen.wide.column { width: 100%; } @@ -210,7 +221,7 @@ /* Standard */ .ui.grid > .column, .ui.grid > .row > .column { - width: 8.3333%; + width: 6.25%; } /* Assume full width with one column */ .ui.grid > .column:only-child, @@ -218,46 +229,51 @@ width: 100%; } - .ui.two.column.grid .column { width: 50%; } - .ui.three.column.grid .column { width: 33.3333%; } - .ui.four.column.grid .column { width: 25%; } - .ui.five.column.grid .column { width: 20%; } - .ui.six.column.grid .column { width: 16.66667%; } - .ui.seven.column.grid .column { width: 14.2857%; } - .ui.eight.column.grid .column { width: 12.5%; } - .ui.nine.column.grid .column { width: 11.1111%; } - .ui.ten.column.grid .column { width: 10%; } - .ui.eleven.column.grid .column { width: 9.0909%; } +.ui.twelve.column.grid .column { + width: 8.3333%; +} +.ui.thirteen.column.grid .column { + width: 7.6923%; +} +.ui.fourteen.column.grid .column { + width: 7.1428%; +} +.ui.fifteen.column.grid .column { + width: 6.6666%; +} +.ui.sixteen.column.grid .column { + width: 6.25%; +} /*-------------------