examples/grid.html
<!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 Properties -->
<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 dividing 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 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 dividing 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 dividing 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 right aligned column">
right aligned column
</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="assets/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="assets/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>
<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.dividing.header,
.first {
margin-top: 5em;
}
.ui.dividing.header:first-child {
margin-top: 0em;
}
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>