|
|
<!DOCTYPE html><html><head> <!-- Standard Meta --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities --> <title>Grid Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/reset.css"> <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
<link rel="stylesheet" type="text/css" href="../dist/components/container.css"> <link rel="stylesheet" type="text/css" href="../dist/components/divider.css"> <link rel="stylesheet" type="text/css" href="../dist/components/grid.css"> <link rel="stylesheet" type="text/css" href="../dist/components/header.css"></head><body>
<div class="ui text container"> <h1 class="ui inverted block header">Using Grids</h1>
<h3 class="first">Container</h3> <p>A container is a fixed width element that wraps your site's content. It remains a constant size and uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.</code> </p> </div>
<div class="ui container"> <div class="ui grid"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div>
<div class="ui text container">
<h3>Page Grid</h3> <p>A <code>page grid</code> uses <code>padding</code> to create fluid page gutters. Each columns width will continuously adjust as your browser width changes to maintain the same percentage of overall browser width.</p> <p>A page grid adjusts its gutters as a percentage of total page width for each device. This causes it to snap to a new width on each breakpoint.</p> </div>
<div class="ui page grid"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
<div class="ui text container"> <h3 class="first">Text Container</h3> <p>Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is a special type of container optimized for a single flowing column of text, like this instructions on this page. </p> <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p> </div>
<div class="ui text container"> <div class="ui one column grid"> <div class="column"></div> </div> </div>
<div class="ui text container">
<h1 class="ui inverted block header">Grid Content</h1>
<h3 class="first">Column Flow</h3> <p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>
<div class="ui grid"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div>
<h3>Clearing Rows</h3> <p>Adding row wrappers allow you to manually specify you want a new row to begin.</p>
<div class="ui three column grid"> <div class="column"></div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div>
<h3>Specifying Row Width</h3> <p>Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p> <div class="ui three column grid"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div>
<h3>Specifying Column Width</h3> <p>You can also specify column widths for each column individually</p> <div class="ui three column grid"> <div class="four wide column">four wide column</div> <div class="eight wide column">eight wide column</div> <div class="four wide column">four wide column</div> </div>
<h3>Special Variations</h3> <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>
<div class="ui horizontal section divider">Celled Grid</div> <div class="ui celled grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div>
<div class="ui horizontal section divider">Internally Celled Grid</div>
<div class="ui internally celled grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div>
<div class="ui horizontal section divider">Divided Grid</div>
<div class="ui divided grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div>
<div class="ui horizontal section divider">Vertically Divided Grid</div>
<div class="ui vertically divided grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div>
<h1 class="ui inverted block header">Adjusting Grids</h1>
<h3 class="first">Centering Content</h3> <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid. </p> <div class="ui two column centered grid"> <div class="column"></div> <div class="four column centered row"> <div class="column"></div> <div class="column"></div> </div> </div>
<h3>Floating Rows</h3> <p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>
<div class="ui grid"> <div class="left floated six wide column"> <div class="ui segment"> Left floated </div> </div> <div class="right floated six wide column"> <div class="ui segment"> Right floated </div> </div> </div>
<h3>Text Alignment</h3> <p>You can specify text alignment using alignment variations on a grid, row, or column level.</p>
<div class="ui grid"> <div class="right aligned eight wide column"> right aligned column </div> <div class="left aligned eight wide column"> left aligned column </div> <div class="center aligned two column row"> <div class="column"> Center aligned row </div> <div class="column"> Center aligned row </div> </div> <div class="sixteen wide column"> Right Aligned Grid </div> </div>
<h3>Vertical Alignment</h3> <p>You can specify vertical alignment on a grid, row, or column level.</p> <div class="ui middle aligned four column centered grid"> <div class="row"> <div class="column"> <img class="ui wireframe image" src="images/wireframe/image.png"> </div> <div class="column"> <img class="ui wireframe image" src="images/wireframe/image.png"> <img class="ui wireframe image" src="images/wireframe/image.png"> </div> <div class="column"> <img class="ui wireframe image" src="images/wireframe/image.png"> </div> </div> </div>
<h3>Equal Width Columns</h3> <p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p> <div class="ui equal width grid"> <div class="row"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div> <div class="row"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div> </div>
<h1>Responsive Patterns</h1>
<h3 class="first">Doubling</h3> <p>You can set columns to double in width at each device jump</p> <div class="ui five column doubling grid"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div>
<h3>Stackable</h3> <p>You can set columns to stack on mobile</p> <div class="ui three column stackable grid"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div>
<h3>Responsive Width Adjustments</h3> <p>You can specify columns to appear at different widths on different screens</p>
<div class="ui grid"> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> </div> <div class="ui grid"> <div class="four wide two wide large screen one wide widescreen column"></div> <div class="four wide two wide large screen one wide widescreen column"></div> <div class="four wide two wide large screen one wide widescreen column"></div> <div class="four wide two wide large screen one wide widescreen column"></div> </div>
<h3>Specifying Device Visibility</h3> <p>You can specify columns to appear only a particular screen</p> <div class="ui grid"> <div class="two column computer only row"> <div class="ten wide column">ten wide column computer only</div> <div class="six wide column">six wide column computer only</div> </div> <div class="sixteen wide mobile only column">sixteen wide column mobile only</div> <div class="three column computer only row"> <div class="column">computer only row</div> <div class="column">computer only row</div> <div class="column">computer only row</div> </div> <div class="two column mobile only row"> <div class="column">mobile only column</div> <div class="column">mobile only column</div> </div> <div class="two column row"> <div class="column">column</div> <div class="column">column</div> </div> </div>
</div> </div>
<style type="text/css">
/* Some basic formatting */code { background-color: #E0E0E0; padding: 0.25em 0.3em; font-family: 'Lato'; font-weight: bold;}.container { padding: 5em 0em;}.ui.block.header,.first { margin-top: 5em;}
.ui.block.header:first-child { margin-top: 0em;}.ui.block.header { margin-left: -4rem; margin-right: -4rem; padding-left: 4rem; padding-right: 4rem;}
h1,h3 { margin-top: 10em;}
img { display: block; max-width: 100%;}img + img { margin-top: 0.5em;}
/* Shows content box (not negative margins) */.grid { position: relative;}.grid:before { position: absolute; top: 1rem; left: 1rem; background-color: #F0F0F0; content: ''; width: calc(100% - 2rem); height: calc(100% - 2rem); box-shadow: 0px 0px 0px 1px #DDDDDD inset;}.ui.divided.grid:before,.celled.grid:before { display: none;}.ui.aligned .column:after { display: none !important;}.grid .column:not(.row):not(.grid):after { background-color: rgba(86, 61, 124, .15); box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset; content: ""; display: block; min-height: 50px;}@media only screen and (max-width: 768px) { .stackable.grid:before { width: 100%; left: 0em; }}</style></body>
</html>
|
