/* * # Semantic - Grid * http://github.com/jlukic/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Grid *******************************/ .ui.grid { display: block; text-align: left; font-size: 0em; margin: 0% -1.5%; padding: 0%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body > .ui.grid { margin-left: 0% !important; margin-right: 0% !important; } .ui.grid:after, .ui.row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*------------------- Columns --------------------*/ /* Standard 16 column */ .ui.grid > .column, .ui.grid > .row > .column { display: inline-block; text-align: left; font-size: 1rem; width: 6.25%; padding-left: 1.5%; padding-right: 1.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } /* Vertical padding when no rows */ .ui.grid > .column { margin-top: 1rem; margin-bottom: 1rem; } /*------------------- Rows --------------------*/ .ui.grid > .row { display: block; width: 100% !important; margin-top: 1.5%; padding: 1rem 0% 0%; font-size: 0rem; } .ui.grid > .row:first-child { padding-top: 0rem; margin-top: 0rem; } /*------------------- Content --------------------*/ .ui.grid > .row > img, .ui.grid > .row > .column > img { max-width: 100%; } .ui.grid .column > .ui.segment:only-child { margin: 0em; } /******************************* Variations *******************************/ /*----------------------- Page Grid (Responsive) -------------------------*/ .ui.page.grid { min-width: 320px; margin-left: 0%; margin-right: 0%; } @media only screen and (max-width: 991px) { .ui.page.grid { padding: 0% 4%; } } @media only screen and (min-width: 992px) { .ui.page.grid { padding: 0% 8%; } } @media only screen and (min-width: 1500px) { .ui.page.grid { padding: 0% 13%; } } @media only screen and (min-width: 1750px) { .ui.page.grid { padding: 0% 18%; } } @media only screen and (min-width: 2000px) { .ui.page.grid { padding: 0% 23%; } } /*------------------- Column Width --------------------*/ /* Sizing Combinations */ .ui.grid > .row > .one.wide.column, .ui.grid > .column.row > .one.wide.column, .ui.grid > .one.wide.column, .ui.column.grid > .one.wide.column { width: 6.25%; } .ui.grid > .row > .two.wide.column, .ui.grid > .column.row > .two.wide.column, .ui.grid > .two.wide.column, .ui.column.grid > .two.wide.column { width: 12.5%; } .ui.grid > .row > .three.wide.column, .ui.grid > .column.row > .three.wide.column, .ui.grid > .three.wide.column, .ui.column.grid > .three.wide.column { width: 18.75%; } .ui.grid > .row > .four.wide.column, .ui.grid > .column.row > .four.wide.column, .ui.grid > .four.wide.column, .ui.column.grid > .four.wide.column { width: 25%; } .ui.grid > .row > .five.wide.column, .ui.grid > .column.row > .five.wide.column, .ui.grid > .five.wide.column, .ui.column.grid > .five.wide.column { width: 31.25%; } .ui.grid > .row > .six.wide.column, .ui.grid > .column.row > .six.wide.column, .ui.grid > .six.wide.column, .ui.column.grid > .six.wide.column { width: 37.5%; } .ui.grid > .row > .seven.wide.column, .ui.grid > .column.row > .seven.wide.column, .ui.grid > .seven.wide.column, .ui.column.grid > .seven.wide.column { width: 43.75%; } .ui.grid > .row > .eight.wide.column, .ui.grid > .column.row > .eight.wide.column, .ui.grid > .eight.wide.column, .ui.column.grid > .eight.wide.column { width: 50%; } .ui.grid > .row > .nine.wide.column, .ui.grid > .column.row > .nine.wide.column, .ui.grid > .nine.wide.column, .ui.column.grid > .nine.wide.column { width: 56.25%; } .ui.grid > .row > .ten.wide.column, .ui.grid > .column.row > .ten.wide.column, .ui.grid > .ten.wide.column, .ui.column.grid > .ten.wide.column { width: 62.5%; } .ui.grid > .row > .eleven.wide.column, .ui.grid > .column.row > .eleven.wide.column, .ui.grid > .eleven.wide.column, .ui.column.grid > .eleven.wide.column { width: 68.75%; } .ui.grid > .row > .twelve.wide.column, .ui.grid > .column.row > .twelve.wide.column, .ui.grid > .twelve.wide.column, .ui.column.grid > .twelve.wide.column { width: 75%; } .ui.grid > .row > .thirteen.wide.column, .ui.grid > .column.row > .thirteen.wide.column, .ui.grid > .thirteen.wide.column, .ui.column.grid > .thirteen.wide.column { width: 81.25%; } .ui.grid > .row > .fourteen.wide.column, .ui.grid > .column.row > .fourteen.wide.column, .ui.grid > .fourteen.wide.column, .ui.column.grid > .fourteen.wide.column { width: 87.5%; } .ui.grid > .row > .fifteen.wide.column, .ui.grid > .column.row > .fifteen.wide.column, .ui.grid > .fifteen.wide.column, .ui.column.grid > .fifteen.wide.column { width: 93.75%; } .ui.grid > .row > .sixteen.wide.column, .ui.grid > .column.row > .sixteen.wide.column, .ui.grid > .sixteen.wide.column, .ui.column.grid > .sixteen.wide.column { width: 100%; } /*------------------- Column Count --------------------*/ /* Assume full width with one column */ .ui.one.column.grid > .row > .column, .ui.one.column.grid > .column, .ui.grid > .one.column.row > .column { width: 100%; } .ui.two.column.grid > .row > .column, .ui.two.column.grid > .column, .ui.grid > .two.column.row > .column { width: 50%; } .ui.three.column.grid > .row > .column, .ui.three.column.grid > .column, .ui.grid > .three.column.row > .column { width: 33.3333%; } .ui.four.column.grid > .row > .column, .ui.four.column.grid > .column, .ui.grid > .four.column.row > .column { width: 25%; } .ui.five.column.grid > .row > .column, .ui.five.column.grid > .column, .ui.grid > .five.column.row > .column { width: 20%; } .ui.six.column.grid > .row > .column, .ui.six.column.grid > .column, .ui.grid > .six.column.row > .column { width: 16.66667%; } .ui.seven.column.grid > .row > .column, .ui.seven.column.grid > .column, .ui.grid > .seven.column.row > .column { width: 14.2857%; } .ui.eight.column.grid > .row > .column, .ui.eight.column.grid > .column, .ui.grid > .eight.column.row > .column { width: 12.5%; } .ui.nine.column.grid > .row > .column, .ui.nine.column.grid > .column, .ui.grid > .nine.column.row > .column { width: 11.1111%; } .ui.ten.column.grid > .row > .column, .ui.ten.column.grid > .column, .ui.grid > .ten.column.row > .column { width: 10%; } .ui.eleven.column.grid > .row > .column, .ui.eleven.column.grid > .column, .ui.grid > .eleven.column.row > .column { width: 9.0909%; } .ui.twelve.column.grid > .row > .column, .ui.twelve.column.grid > .column, .ui.grid > .twelve.column.row > .column { width: 8.3333%; } .ui.thirteen.column.grid > .row > .column, .ui.thirteen.column.grid > .column, .ui.grid > .thirteen.column.row > .column { width: 7.6923%; } .ui.fourteen.column.grid > .row > .column, .ui.fourteen.column.grid > .column, .ui.grid > .fourteen.column.row > .column { width: 7.1428%; } .ui.fifteen.column.grid > .row > .column, .ui.fifteen.column.grid > .column, .ui.grid > .fifteen.column.row > .column { width: 6.6666%; } .ui.sixteen.column.grid > .row > .column, .ui.sixteen.column.grid > .column, .ui.grid > .sixteen.column.row > .column { width: 6.25%; } /* Assume full width with one column */ .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; } /*---------------------- Relaxed -----------------------*/ .ui.relaxed.grid { margin: 0% -2.5%; } .ui.relaxed.grid > .column, .ui.relaxed.grid > .row > .column { padding-left: 2.5%; padding-right: 2.5%; } /*---------------------- "Floated" -----------------------*/ .ui.grid .left.floated.column { float: left; } .ui.grid .right.floated.column { float: right; } /*---------------------- Divided -----------------------*/ .ui.divided.grid, .ui.divided.grid > .row { display: table; width: 100%; margin-left: 0% !important; margin-right: 0% !important; } .ui.divided.grid > .column:not(.row), .ui.divided.grid > .row > .column { display: table-cell; -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); } .ui.divided.grid > .column.row { display: table; } .ui.divided.grid > .column:first-child, .ui.divided.grid > .row > .column:first-child { -webkit-box-shadow: none; box-shadow: none; } /* Vertically Divided */ .ui.vertically.divided.grid > .row { -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; } .ui.vertically.divided.grid > .row > .column, .ui.vertically.divided.grid > .column:not(.row), .ui.vertically.divided.grid > .row:first-child { -webkit-box-shadow: none !important; box-shadow: none !important; } /*---------------------- Celled -----------------------*/ .ui.celled.grid { display: table; width: 100%; margin-left: 0% !important; margin-right: 0% !important; -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; box-shadow: 0px 0px 0px 1px #DFDFDF; } .ui.celled.grid > .row, .ui.celled.grid > .column.row, .ui.celled.grid > .column.row:first-child { display: table; width: 100%; margin-top: 0em; padding-top: 0em; -webkit-box-shadow: 0px -1px 0px 0px #dfdfdf; box-shadow: 0px -1px 0px 0px #dfdfdf; } .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column { display: table-cell; padding: 0.75em; -webkit-box-shadow: -1px 0px 0px 0px #dfdfdf; box-shadow: -1px 0px 0px 0px #dfdfdf; } .ui.celled.grid > .column:first-child, .ui.celled.grid > .row > .column:first-child { -webkit-box-shadow: none; box-shadow: none; } .ui.celled.page.grid { -webkit-box-shadow: none; box-shadow: none; } /*---------------------- Horizontally Centered -----------------------*/ /* Vertical Centered */ .ui.left.aligned.grid, .ui.left.aligned.grid > .row > .column, .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 > .row > .column, .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 > .row > .column, .ui.right.aligned.grid > .column, .ui.grid .right.aligned.column, .ui.grid > .right.aligned.row > .column { text-align: right; } .ui.justified.grid, .ui.justified.grid > .row > .column, .ui.justified.grid > .column, .ui.grid .justified.column, .ui.grid > .justified.row > .column { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /*---------------------- Vertically Centered -----------------------*/ /* Vertical Centered */ .ui.top.aligned.grid, .ui.top.aligned.grid > .row > .column, .ui.top.aligned.grid > .column, .ui.grid .top.aligned.column, .ui.grid > .top.aligned.row > .column { vertical-align: top; } .ui.middle.aligned.grid, .ui.middle.aligned.grid > .row > .column, .ui.middle.aligned.grid > .column, .ui.grid .middle.aligned.column, .ui.grid > .middle.aligned.row > .column { vertical-align: middle; } .ui.bottom.aligned.grid, .ui.bottom.aligned.grid > .row > .column, .ui.bottom.aligned.grid > .column, .ui.grid .bottom.aligned.column, .ui.grid > .bottom.aligned.row > .column { vertical-align: bottom; } /*---------------------- Equal Height Columns -----------------------*/ .ui.grid > .equal.height.row { display: table; width: 100%; } .ui.grid > .equal.height.row > .column { display: table-cell; } /*---------------------- Only (Device) -----------------------*/ /* Mobile Only Hide */ @media only screen and (max-width: 767px) { .ui.tablet:not(.mobile).only.grid, .ui.grid > .tablet:not(.mobile).only.row, .ui.grid > .tablet:not(.mobile).only.column, .ui.grid > .row > .tablet:not(.mobile).only.column { display: none !important; } .ui.computer:not(.mobile).only.grid, .ui.grid > .computer:not(.mobile).only.row, .ui.grid > .computer:not(.mobile).only.column, .ui.grid > .row > .computer:not(.mobile).only.column { display: none !important; } } /* Tablet Only Hide */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.mobile:not(.tablet).only.grid, .ui.grid > .mobile:not(.tablet).only.row, .ui.grid > .mobile:not(.tablet).only.column, .ui.grid > .row > .mobile:not(.tablet).only.column { display: none !important; } .ui.computer:not(.tablet).only.grid, .ui.grid > .computer:not(.tablet).only.row, .ui.grid > .computer:not(.tablet).only.column, .ui.grid > .row > .computer:not(.tablet).only.column { display: none !important; } } /* Computer Only Hide */ @media only screen and (min-width: 992px) { .ui.mobile:not(.computer).only.grid, .ui.grid > .mobile:not(.computer).only.row, .ui.grid > .mobile:not(.computer).only.column, .ui.grid > .row > .mobile:not(.computer).only.column { display: none !important; } .ui.tablet:not(.computer).only.grid, .ui.grid > .tablet:not(.computer).only.row, .ui.grid > .tablet:not(.computer).only.column, .ui.grid > .row > .tablet:not(.computer).only.column { display: none !important; } } /*------------------- Doubling --------------------*/ /* Mobily Only */ @media only screen and (max-width: 767px) { .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 100%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 100%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 100%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 50%; } .ui.seven.column.doubling.grid > .row > .column, .ui.seven.column.doubling.grid > .column, .ui.grid > .seven.column.doubling.row > .column { width: 50%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 50%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 50%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 50%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 33.3333333333333%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 33.3333333333333%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 25%; } } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 50%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 50%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 33.3333333%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 33.3333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 33.3333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 25%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 25%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 20%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 16.6666666%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 14.28571428571429%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 12.5%; } } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767px) { .ui.stackable.grid { display: block !important; padding: 0em; margin: 0em; } .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column { display: block !important; width: auto !important; margin: 1em 0em 0em !important; padding: 1em 0em 0em !important; -webkit-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, 0.1); } .ui.stackable.grid > .row:first-child > .column:first-child, .ui.stackable.grid > .column:first-child { margin-top: 0em !important; padding-top: 0em !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: none !important; } .ui.stackable.page.grid > .row > .column, .ui.stackable.page.grid > .column { padding-left: 1em !important; padding-right: 1em !important; } /* Remove pointers from vertical menus */ .ui.stackable.grid .vertical.pointing.menu .item:after { display: none; } }