You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1038 lines
37 KiB
1038 lines
37 KiB
---
|
|
layout : 'default'
|
|
css : 'Grid'
|
|
|
|
element : 'grid'
|
|
elementType : 'collection'
|
|
|
|
title : 'Grid'
|
|
description : 'A grid is a structure used to harmonize negative space in a layout'
|
|
type : 'UI Collection'
|
|
|
|
themes : ['Default']
|
|
---
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/grid.less" />
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="item">Introduction</a>
|
|
<a class="active item">Types</a>
|
|
<a class="item">Elements</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Introduction</h2>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Grid</h4>
|
|
<p>A grid is made up of columns of content with gutters to provide negative space between columns.</p>
|
|
|
|
<div class="ui ignored message">
|
|
<p>A grid does not necessarily need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row.</p>
|
|
</div>
|
|
<div class="ui ignored info message">
|
|
<p>All grid systems must assume an arbitrary amount of column rows. Semantic's default theme assumes <b>16 columns</b></p>
|
|
</div>
|
|
|
|
<div class="ui grid">
|
|
<div class="four wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="four wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="four wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="four wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Grid with Rows</h4>
|
|
<p>A grid can wrap groups of columns into rows</p>
|
|
<div class="ui ignored message">
|
|
The bottom and top rows, when rows are specified will sit flush with the edge of the grid.</p>
|
|
</div>
|
|
<div class="ui ignored positive message">
|
|
<h3 class="ui header">The Benefits of Rows</h3>
|
|
<p>It's often easier to have dynamic content output without nested rows, but using row wrappers is the only way for variations like <code>equal height</code> and <code>vertically divided</code> to function correctly.</p>
|
|
<p>In addition, the bottom and top rows, when specified will sit flush with the edge of the grid.</p>
|
|
</div>
|
|
|
|
<div class="ui grid">
|
|
<div class="ui four column row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui row">
|
|
<div class="three wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="eight wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="five wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Nested grids</h4>
|
|
<p>A grid can be placed inside another grid</p>
|
|
|
|
<div class="ui ignored message">
|
|
<p>Any grid column can be broken up using a second grid, however for the content of the inner grid to align with the outter grid, you will need to use the <code>fitted grid</code> variation on the inner grid, removing the outer margins from the first and last element.</p>
|
|
</div>
|
|
<div class="ui ignored info message">
|
|
<h3 class="ui header">Column Count</h3>
|
|
<p>Each grid is divided into 16 columns, so a grid inside a grid inside a column, <b>sub-divides that column into 16 more columns</b>. This means for example, a <code>eight wide column</code> on a nested grid inside a <code>two wide column</code>, is the same as a <code>one wide column</code> on the outer grid.</p>
|
|
</div>
|
|
|
|
<div class="ui two column grid">
|
|
<div class="column">
|
|
<div class="ui two column fitted grid">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui fitted grid">
|
|
<div class="eight wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
<div class="eight wide column">
|
|
<div class="ui segment">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Page Grid</h4>
|
|
<p>A page grid is used to layout page contents into a grid system.
|
|
|
|
<div class="ui ignored info message">
|
|
<p>A page grid has gutters to the left and right of its columns to center content on a page. These gutterss adjust as the width of the browser changes, ensuring your grid uses a sensible amount of the browser.</p>
|
|
</div>
|
|
|
|
<div class="ui page grid">
|
|
<div class="eight wide column">
|
|
<div class="ui labeled vertical fluid inverted icon menu">
|
|
<a class="item">
|
|
<i class="icon mail"></i>
|
|
Mail
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon lab"></i>
|
|
Lab
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon star"></i>
|
|
Favorites
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="eight wide column">
|
|
<div class="ui segment">
|
|
<b>Inbox</b>
|
|
<p>Welcome to your inbox. Would you like to see more information?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Divided Grid</h4>
|
|
<p>A grid can have dividers between its columns</p>
|
|
<div class="ui six column divided grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Vertically Divided Grid</h4>
|
|
<p>A grid can have dividers between rows</p>
|
|
<div class="ui vertically divided grid">
|
|
<div class="two column row">
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="three column row">
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Celled Grid</h4>
|
|
<p>A grid can have rows divided into cells</p>
|
|
<div class="ui celled grid">
|
|
<div class="row">
|
|
<div class="two wide column" style="">
|
|
<p>Lorem ipsum do</p>
|
|
</div>
|
|
<div class="three wide column" style="">
|
|
<p>Lorem ipsum dolor </p>
|
|
</div>
|
|
<div class="seven wide column">
|
|
<p>Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="five wide column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
|
|
<div class="three wide column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
|
|
<div class="two wide column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="two wide column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Elements</h2>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Rows</h4>
|
|
<p>A row is used to create vertical padding between groups of columns on a page.</p>
|
|
<div class="ui grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
A
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
B
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Columns</h4>
|
|
<p>Columns each contain gutters giving them equal spacing from other columns.</p>
|
|
<div class="ui three column grid">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
3
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
4
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<h3 class="ui header">Grid</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Specifying Column Count Per Row</h4>
|
|
<p>A grid can have a different number of columns per row</p>
|
|
<div class="ui two column grid">
|
|
<div class="column">
|
|
<div class="ui fluid form segment">
|
|
<h3 class="ui header">Log-in</h3>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="ui blue submit button">Login</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui fluid form segment">
|
|
<h3 class="ui header">Register</h3>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" id="conditions" />
|
|
<label for="conditions">I agree to the terms and conditions</label>
|
|
</div>
|
|
</div>
|
|
<div class="ui blue submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Fitted</h4>
|
|
<p>A fitted grid fits its outer columns against its container</p>
|
|
|
|
<h3 class="ui header">Content Outside Grid</h3>
|
|
<p>This paragraph of text will automatically align with the edges of the grid below because it is fitted to remove left and right margins.
|
|
<div class="ui two column fitted grid">
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="column">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Relaxed</h4>
|
|
<p>A grid can increase its gutters to allow for more negative space</p>
|
|
<div class="ui two column relaxed grid">
|
|
<div class="column">
|
|
<div class="ui fluid form segment">
|
|
<h3 class="ui header">Log-in</h3>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="ui blue submit button">Login</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui fluid form segment">
|
|
<h3 class="ui header">Register</h3>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" id="terms" />
|
|
<label for="terms">I agree to the terms and conditions</label>
|
|
</div>
|
|
</div>
|
|
<div class="ui blue submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui two column very relaxed grid">
|
|
<div class="column">
|
|
<div class="ui fluid form segment">
|
|
<h3 class="ui header">Log-in</h3>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="ui blue submit button">Login</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui fluid form segment">
|
|
<h3 class="ui header">Register</h3>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" id="terms" />
|
|
<label for="terms"></label>
|
|
</div>
|
|
<label>I agree to the terms and conditions</label>
|
|
</div>
|
|
<div class="ui blue submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Doubling Grid</h4>
|
|
<p>A grid can double its</p>
|
|
<div class="ui text message info ignore">
|
|
<i class="icon heart"></i> A grid will round its columns to the closest reasonable value when doubling, for example a <code>five column grid</code> will double <code>1 mobile, 3 tablet, 5 desktop</code>
|
|
</div>
|
|
<div class="five column doubling ui grid">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Stackable Grid</h4>
|
|
<p>A grid can have its columns stack on-top of each other after reaching mobile breakpoints</p>
|
|
<div class="ui text message info ignore">
|
|
<i class="icon heart"></i> To see a grid stack, try resizing your browser to a small width
|
|
</div>
|
|
<div class="two column stackable ui grid">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<h4 class="ui header">Text Alignment</h4>
|
|
<p>A grid can specify its text alignment</p>
|
|
<div class="ui center aligned three column grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Cats
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Dogs
|
|
</div>
|
|
<div class="item">
|
|
Poodle
|
|
</div>
|
|
<div class="item">
|
|
Cockerspaniel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Monkeys
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Vertical Alignment</h4>
|
|
<p>A grid can specify its vertical alignment to have all its columns vertically centered.</p>
|
|
<div class="ui middle aligned three column grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Cats
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Dogs
|
|
</div>
|
|
<div class="item">
|
|
Poodle
|
|
</div>
|
|
<div class="item">
|
|
Cockerspaniel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Monkeys
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="ui header">Rows</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Responsive to Device</h4>
|
|
<p>A grid can have its columns, or rows only show content for computer, tablet, or mobile.</p>
|
|
<div class="ui text message info ignore">
|
|
<i class="icon heart"></i> Breakpoints are 768px and below for mobile, 768-992px for tablet and 992px+ for computer</i>
|
|
</div>
|
|
<div class="ui grid">
|
|
<div class="two column mobile only row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Mobile
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Mobile
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="three column row">
|
|
<div class="computer only column">
|
|
<div class="ui segment">
|
|
Computer
|
|
</div>
|
|
</div>
|
|
<div class="tablet mobile only column">
|
|
<div class="ui segment">
|
|
Tablet and Mobile
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
All Sizes
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
All Sizes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="four column computer only row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Computer
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Computer
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Computer
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Computer
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="three column tablet only row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Tablet
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Tablet
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Tablet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Equal Height</h4>
|
|
<p>A row can specify that it is equal height so all of its columns appear the length of its longest column.</p>
|
|
<div class="ui three column grid">
|
|
<div class="equal height row">
|
|
<div class="column" style="background-color:#F0F0FF;">
|
|
<p>This is a short row</p>
|
|
</div>
|
|
<div class="column" style="background-color:#F0F0FF;">
|
|
<p>This is a short row</p>
|
|
</div>
|
|
<div class="column" style="background-color:#F0F0FF;">
|
|
<p>This is a very long row with lots of text in it and way more text than the other rows</p>
|
|
<p>It might even span for multiple paragraphs.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Vertical Alignment</h4>
|
|
<p>A row can also specify its vertical alignment to have its columns vertically centered.</p>
|
|
<div class="ui three column grid">
|
|
<div class="top aligned row">
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Cats
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Dogs
|
|
</div>
|
|
<div class="item">
|
|
Poodle
|
|
</div>
|
|
<div class="item">
|
|
Cockerspaniel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Monkeys
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="justified row">
|
|
<div class="sixteen wide column">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.</p>
|
|
</div>
|
|
</div>
|
|
<div class="middle aligned row">
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Dogs
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Dogs
|
|
</div>
|
|
<div class="item">
|
|
Poodle
|
|
</div>
|
|
<div class="item">
|
|
Cockerspaniel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Monkeys
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom aligned row">
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Cats
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Dogs
|
|
</div>
|
|
<div class="item">
|
|
Poodle
|
|
</div>
|
|
<div class="item">
|
|
Cockerspaniel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Monkeys
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="ui header">Columns</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Floating</h4>
|
|
<p>A column can be "floated" to either the left or right of its row.</p>
|
|
<div class="ui grid">
|
|
<div class="left floated four wide column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Dogs
|
|
</div>
|
|
<div class="item">
|
|
Poodle
|
|
</div>
|
|
<div class="item">
|
|
Cockerspaniel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right floated four wide column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Cats
|
|
</div>
|
|
<div class="item">
|
|
Abysinnian
|
|
</div>
|
|
<div class="item">
|
|
Sphynx
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Column Width</h4>
|
|
<p>A column can vary in width taking up more than a single grid column.</p>
|
|
<div class="ui grid">
|
|
<div class="three wide column">
|
|
<div class="ui segment"><b>Column One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.</div>
|
|
</div>
|
|
<div class="six wide column">
|
|
<div class="ui segment"><b>Column Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</div>
|
|
</div>
|
|
<div class="three wide column">
|
|
<div class="ui segment"><b>Column Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|