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.
1549 lines
57 KiB
1549 lines
57 KiB
---
|
|
layout : 'default'
|
|
css : 'Grid'
|
|
standalone : true
|
|
|
|
element : 'grid'
|
|
elementType : 'collection'
|
|
|
|
title : 'Grid'
|
|
description : 'A grid is used to harmonize negative space in a layout'
|
|
type : 'UI Collection'
|
|
|
|
themes : ['Default']
|
|
---
|
|
<link rel="stylesheet/less" type="text/css" href="/src/definitions/collections/grid.less" />
|
|
<script src="/javascript/grid.js"></script>
|
|
|
|
<%- @partial('header', { tabs: { overview: 'Overview', definition: 'Definition' } }) %>
|
|
|
|
<div class="main ui container">
|
|
|
|
<div class="ui active intro tab" data-tab="overview">
|
|
|
|
<h2 class="ui dividing header">Introduction</h2>
|
|
|
|
<div class="highlighted example" data-class="grid">
|
|
<h4 class="ui header">Grids</h4>
|
|
<p>A grid is a structure with a <a href="http://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1/" target="_blank">long history</a> used to align negative space in designs.</p>
|
|
<p>Using a grid makes content appear to flow more naturally on your page.</p>
|
|
<div class="ui ignored toggle animation checkbox">
|
|
<input type="checkbox" name="animation" />
|
|
<label>Toggle Animation</label>
|
|
</div>
|
|
<div class="ui ignored hidden divider"></div>
|
|
<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>
|
|
</div>
|
|
|
|
<div class="highlighted example" data-use-content="true" data-class="column">
|
|
<h4 class="ui header">Columns</h4>
|
|
<p>Grids divide horizontal space into indivisible units called "columns". All columns in a grid must specify their width as proportion of the total available row width.</p>
|
|
<p>All grid systems chooses an arbitrary column count to allow per row. Semantic's default theme uses <b>16 columns</b>.</p>
|
|
|
|
<p>The example below shows four <code>four wide</code> columns will fit in the first row, <code>16 / 4 = 4</code>, and three various sized columns in the second row. <code>2 + 8 + 6 = 16</code></p>
|
|
|
|
<p>The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying <a href="/usage/theming.html">theming variables</a>.</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="two wide column"></div>
|
|
<div class="eight wide column"></div>
|
|
<div class="six wide column"></div>
|
|
</div>
|
|
</div>
|
|
<div class="highlighted example" data-use-content="true" data-class="row">
|
|
<h4 class="ui header">Rows</h4>
|
|
<p>Rows are groups of columns which are aligned horizontally.</p>
|
|
<p>Rows can either be <em>explicit</em>, marked with an additional <code>row</code> element, or <em>implicit</em>, automatically occurring when no more space is left in a previous row.
|
|
</p>
|
|
<p>After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm.
|
|
<div class="ui four column grid">
|
|
<div class="row">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlighted negative example" data-use-content="true" data-class="relaxed">
|
|
<h4 class="ui header">Gutters</h4>
|
|
<p>Grid columns are separated by areas of white space referred to as "gutters". Gutters improve legibility by providing, <a href="https://en.wikipedia.org/wiki/Negative_space" target="_blank">negative space</a> between page elements.</p>
|
|
<p>Gutters remain a constant size regardless of the width of the grid, or how many columns are in a row. To increase the size of gutters in a particular grid, you can use a <a href="#relaxed"><code>relaxed grid</code></a> variation.</p>
|
|
<div class="ui grid">
|
|
<div class="three column row">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
<div class="eight column row">
|
|
<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 relaxed grid">
|
|
<div class="three column row">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
<div class="eight column row">
|
|
<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>
|
|
|
|
<div class="highlighted negative example">
|
|
<h4 class="ui header">Negative Margins</h4>
|
|
<p>Since all grid columns include gutters, grids use <a href="http://csswizardry.com/2011/08/building-better-grid-systems/">negative margins</a> to make sure that the first and last columns sit flush with content outside the grid.</p>
|
|
<p>In the following example, you can see even though the top row has padding, the <a href="/elements/button.html#vertically-attached"><code>attached button</code></a> still sits flush with the edge of the grid.<p>
|
|
<p>In some cases, like when a column or row is <a href="#colored"><code>colored</code></a>, you may want to avoid using negative margins. You can do this by using a <a href="#padded"><code>padded grid</code></a> variation.</p>
|
|
<div class="ui top attached button">Button before grid</div>
|
|
<div class="ui grid">
|
|
<div class="sixteen wide column"></div>
|
|
<div class="ten wide column"></div>
|
|
<div class="six wide column"></div>
|
|
</div>
|
|
<div class="ui grid">
|
|
<div class="sixteen wide column"></div>
|
|
</div>
|
|
<div class="ui bottom attached button">Button after grid</div>
|
|
</div>
|
|
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Page Grids</h4>
|
|
<p>Grids are fluid and will automatically flow in size to take the maximum available width.</p>
|
|
<p><a href="/elements/container.html">Containers</a> are elements designed to limit page content to a reasonable maximum width for display based on the size of the user's screen.</p>
|
|
<p>Using a <a href="/elements/container.html#containers-using-grids"><code>ui grid container</code></a> is the best way to include top-level page content inside a grid.</p>
|
|
<div class="ui warning message">
|
|
<p>In version <code>1.x</code> of Semantic UI <code>page grid</code> were used to to contain the maximum width of grids holding page content. Page grid have been deprecated in favor for the simpler <code>container</code> element.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Columns</h2>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Automatic Flow</h4>
|
|
<p>Most grids do not need to specify rows. 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>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Column Content</h4>
|
|
<p>Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns.</p>
|
|
<div class="ui three column grid">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlighted example" data-use-content="true" data-class="wide">
|
|
<h4 class="ui header">Column Widths</h4>
|
|
<p>Column widths can be specified using <a href="#column-width"><code>(x) wide</code></a> class names. If a column cannot fit in a row it will automatically flow to the next row</p>
|
|
<div class="ui grid">
|
|
<div class="eight wide column"></div>
|
|
<div class="eight wide column"></div>
|
|
<div class="ten wide column"></div>
|
|
<div class="six wide column"></div>
|
|
<div class="four wide column"></div>
|
|
<div class="twelve wide column"></div>
|
|
<div class="two wide column"></div>
|
|
<div class="fourteen wide column"></div>
|
|
<div class="sixteen wide column"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Rows</h2>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Grouping</h4>
|
|
<p>Row wrappers allow you to apply variations to a group of columns.</p>
|
|
<div class="ui four column grid">
|
|
<div class="two column row">
|
|
<div class="column"></div>
|
|
</div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
</div>
|
|
<div class="highlighted example" data-use-content="true" data-class="floated">
|
|
<h4 class="ui header">Clearing Content</h4>
|
|
<p>Row wrappers will automatically clear previous columns, making them useful when using <a href="#floated"><code>floated</code></a> variations.</p>
|
|
<div class="ui grid">
|
|
<div class="four column row">
|
|
<div class="left floated column"></div>
|
|
<div class="right floated column"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="three wide column"></div>
|
|
<div class="eight wide column"></div>
|
|
<div class="five wide column"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example" data-class="internally celled">
|
|
<h4 class="ui header">Special Grids</h4>
|
|
<p>Additionally, some types of grids, like <a href="#divided"><code>divided</code></a> or <a href="#celled"><code>celled</code></a> require row wrappers to apply formatting correctly.</p>
|
|
|
|
<div class="ui internally celled grid">
|
|
<div class="row">
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="ten wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
|
|
</div>
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="ten wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Varying Grids</h2>
|
|
|
|
|
|
<div class="highlighted special example" data-use-content="true" data-class="grid">
|
|
<h4 class="ui header">Nesting Grids</h4>
|
|
<p>Grids can be placed inside of other grids, letting you sub-divide columns.</p>
|
|
|
|
<div class="ui two column grid">
|
|
<div class="column">
|
|
<div class="ui three column grid">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
</div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column">
|
|
<div class="ui grid">
|
|
<div class="ten wide column"></div>
|
|
<div class="six wide column"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="colored example" data-use-content="true" data-class="colored, padded">
|
|
<h4 class="ui header">Colored</h4>
|
|
<p>Grids can use named <a href="#colored"><b>colors</b> variations</a> to add background colors, but only with <a href="#padded"><code>padded grid</code></a> that do not include negative margins.</p>
|
|
<p>To include a color that is not available in the default palette its perfectly fine to use CSS</p>
|
|
<div class="ui equal width center aligned padded grid">
|
|
<div class="row">
|
|
<div class="olive column">
|
|
Olive
|
|
</div>
|
|
<div class="black column">
|
|
Black
|
|
</div>
|
|
</div>
|
|
<div class="row" style="background-color: #869D05;color: #FFFFFF;">
|
|
<div class="column">Custom Row</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="black column">
|
|
Black
|
|
</div>
|
|
<div class="olive column">
|
|
Olive
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="highlighted example" data-class="equal width">
|
|
<h4 class="ui header">Automatic Column Count</h4>
|
|
<p>The <a href="#equal-width"><code>equal width</code></a> variation will automatically divide column width evenly. This is useful with dynamic content where you do not know the column count in advance.</p>
|
|
<div class="ui equal width grid">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="equal width row">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlighted example" data-class="centered">
|
|
<h4 class="ui header">Centering Content</h4>
|
|
<p>If a row does not take up all sixteen grid columns, you can use a <a href="#centered"><code>centered</code></a> variation 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>
|
|
</div>
|
|
|
|
<div class="example" data-use-content="true" data-class="left floated right aligned, right floated left aligned, center aligned, sixteen wide">
|
|
<h4 class="ui header">Significant Word Order</h4>
|
|
<p>Grids include many variations for adjusting things like vertical or horizontal alignment, text alignment, or default gutter sizes.</p>
|
|
<p>Some multi-word variations, like <a href="#floated"><code>left floated</code></a> or <a href="#text-alignment"><code>right aligned</code></a> are word-order dependent and require you to use adjacent class names.</p>
|
|
|
|
<div class="ui right aligned grid">
|
|
<div class="left floated right aligned six wide column">
|
|
<div class="ui segment">
|
|
Left floated right aligned column
|
|
</div>
|
|
</div>
|
|
<div class="right floated left aligned six wide column">
|
|
<div class="ui segment">
|
|
Right floated left aligned column
|
|
</div>
|
|
</div>
|
|
<div class="center aligned two column row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Center aligned row
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Center aligned row
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sixteen wide column">
|
|
<div class="ui segment">
|
|
Right Aligned Grid
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Responsive Grids</h2>
|
|
|
|
<div class="highlighted example" data-class="container">
|
|
<h4 class="ui header">Containers</h4>
|
|
<p>A <a href="/elements/container.html">container</a> can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.</p>
|
|
<div class="ui grid container">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Stackable</h4>
|
|
<p>A <a href="#stackable"><code>stackable grid</code></a> will automatically stack rows to a single columns on mobile devices</p>
|
|
<div class="ui stackable four column grid">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
</div>
|
|
<div class="example" data-class="mobile reversed">
|
|
<h4 class="ui header">Reverse Order</h4>
|
|
<p>Semantic includes special <a href="#reversed"><code>reversed</code></a> variations that allow you to reverse the order of columns or rows by device</p>
|
|
<div class="ui mobile reversed equal width grid">
|
|
<div class="column">
|
|
First
|
|
</div>
|
|
<div class="column">
|
|
Second
|
|
</div>
|
|
<div class="column">
|
|
Third
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">Doubling</h4>
|
|
<p>A <a href="#doubling"><code>doubling</code></a> grid will double column widths for each device jump.</p>
|
|
<div class="ui grid">
|
|
<div class="doubling eight column row">
|
|
<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="doubling six column row">
|
|
<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="doubling four column row">
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
<div class="column"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlighted example" data-class="computer only, six wide tablet eight wide computer" data-use-content="true">
|
|
<h4 class="ui header">Manual Tweaks</h4>
|
|
<p>Although design patterns like <a href="#doubling"><code>doubling</code></a> or <a href="#stackable"><code>stackable</code></a> are useful at simplifying responsive styling, you can also manually tweak device presentation by specifying <a href="#device-width"><code>(x) wide device</code></a> or <a href="#device-visibility"><code>device only</code></a> columns or rows.
|
|
<div class="ui centered grid">
|
|
<div class="computer only row">
|
|
<div class="column"></div>
|
|
</div>
|
|
<div class="six wide tablet eight wide computer column"></div>
|
|
<div class="six wide tablet eight wide computer column"></div>
|
|
<div class="six wide tablet eight wide computer column"></div>
|
|
<div class="six wide tablet eight wide computer column"></div>
|
|
<div class="six wide tablet eight wide computer column"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="definition">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="highlighted example">
|
|
<h4 class="ui header">
|
|
Grid
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank" class="ui teal label">Flexbox</a>
|
|
</h4>
|
|
<p>A basic grid</p>
|
|
<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="example">
|
|
<h4 class="ui header">
|
|
Divided
|
|
<span class="ui black label">Requires Rows</span>
|
|
</h4>
|
|
<p>A grid can have dividers between its columns</p>
|
|
<div class="ui three column divided grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">
|
|
Vertically Divided
|
|
<span class="ui black label">Requires Rows</span>
|
|
</h4>
|
|
<p>A grid can have dividers between rows</p>
|
|
<div class="ui vertically divided grid">
|
|
<div class="two column row">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
<div class="three column row">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">
|
|
Celled
|
|
<span class="ui black label">Requires Rows</span>
|
|
</h4>
|
|
<p>A grid can have rows divided into cells</p>
|
|
<div class="ui celled grid">
|
|
<div class="row">
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="thirteen wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="ten wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">
|
|
Internally Celled
|
|
<span class="ui black label">Requires Rows</span>
|
|
</h4>
|
|
<p>A grid can have rows divisions only between internal rows</p>
|
|
<div class="ui internally celled grid">
|
|
<div class="row">
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="ten wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
|
|
</div>
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="ten wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Content</h2>
|
|
|
|
<div class="example" data-use-content="true" data-class="row">
|
|
<h4 class="ui header">Rows</h4>
|
|
<p>A row is a horizontal grouping of columns</p>
|
|
<div class="ui three column grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example" data-use-content="true" data-class="column">
|
|
<h4 class="ui header">Columns</h4>
|
|
<p>Columns each contain gutters giving them equal spacing from other columns.</p>
|
|
<div class="ui grid">
|
|
<div class="eight wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="eight wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="eight wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="eight wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
|
|
<div class="example" data-use-content="true">
|
|
<h4 class="ui header">Floated</h4>
|
|
<p>A column can sit flush against the left or right edge of a row</p>
|
|
<div class="ui grid">
|
|
<div class="left floated five wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="right floated five wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example" data-use-content="true" data-class="wide">
|
|
<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="four wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="nine wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="three wide column">
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example" data-use-content="true" data-class="column count">
|
|
<h4 class="ui header">Column Count</h4>
|
|
<p>A grid can have a different number of columns per row</p>
|
|
<div class="ui grid">
|
|
<div class="three column 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">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="four column 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">
|
|
</div>
|
|
<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">
|
|
</div>
|
|
</div>
|
|
<div class="five column 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">
|
|
</div>
|
|
<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">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example" data-use-content="true">
|
|
<h4 class="ui header">
|
|
Equal Width
|
|
</h4>
|
|
<p>A row can automatically resize all elements to split the available width evenly</p>
|
|
<div class="ui equal width grid">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
</div>
|
|
<div class="eight wide column">
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui equal width grid">
|
|
<div class="row">
|
|
<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 class="row">
|
|
<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>
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment">1</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stretched example" data-use-content="true">
|
|
<h4 class="ui header">
|
|
Stretched
|
|
</h4>
|
|
<p>An can stretch its contents to take up the entire column height</p>
|
|
<div class="ui three column divided grid">
|
|
<div class="stretched row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
<div class="ui segment">
|
|
3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui equal width grid">
|
|
<div class="stretched row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="six wide column">
|
|
<div class="ui segment">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="six wide column">
|
|
<div class="ui segment">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
1
|
|
</div>
|
|
<div class="ui segment">
|
|
2
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example" data-class="vertically padded, horizontally padded, padded">
|
|
<h4 class="ui header">Padded</h4>
|
|
<p>A grid can preserve its vertical and horizontal gutters on first and last columns</p>
|
|
|
|
<p>The following grid has vertical and horizontal gutters</p>
|
|
<div class="ui divider"></div>
|
|
<div class="ui two column padded grid">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<p>The following grid has vertical gutters.</p>
|
|
<div class="ui divider"></div>
|
|
<div class="ui two column vertically padded grid">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<p>The following grid has horizontal gutters</p>
|
|
<div class="ui divider"></div>
|
|
<div class="ui two column horizontally padded grid">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</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 four column relaxed grid">
|
|
<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">
|
|
</div>
|
|
<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">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui four column very relaxed grid">
|
|
<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">
|
|
</div>
|
|
<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">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example" data-use-content="true">
|
|
<h4 class="ui header">Colored</h4>
|
|
<p>A grid row or column can be colored</p>
|
|
<div class="ui five column padded grid">
|
|
<div class="red column">Red</div>
|
|
<div class="orange column">Orange</div>
|
|
<div class="yellow column">Yellow</div>
|
|
<div class="olive column">Olive</div>
|
|
<div class="green column">Green</div>
|
|
<div class="teal column">Teal</div>
|
|
<div class="blue column">Blue</div>
|
|
<div class="violet column">Violet</div>
|
|
<div class="purple column">Purple</div>
|
|
<div class="pink column">Pink</div>
|
|
<div class="brown column">Brown</div>
|
|
<div class="grey column">Grey</div>
|
|
<div class="black column">Black</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui padded grid">
|
|
<div class="red row">
|
|
<div class="column">Red</div>
|
|
</div>
|
|
<div class="orange row">
|
|
<div class="column">Orange</div>
|
|
</div>
|
|
<div class="yellow row">
|
|
<div class="column">Yellow</div>
|
|
</div>
|
|
<div class="olive row">
|
|
<div class="column">Olive</div>
|
|
</div>
|
|
<div class="green row">
|
|
<div class="column">Green</div>
|
|
</div>
|
|
<div class="teal row">
|
|
<div class="column">Teal</div>
|
|
</div>
|
|
<div class="blue row">
|
|
<div class="column">Blue</div>
|
|
</div>
|
|
<div class="violet row">
|
|
<div class="column">Violet</div>
|
|
</div>
|
|
<div class="purple row">
|
|
<div class="column">Purple</div>
|
|
</div>
|
|
<div class="pink row">
|
|
<div class="column">Pink</div>
|
|
</div>
|
|
<div class="brown row">
|
|
<div class="column">Brown</div>
|
|
</div>
|
|
<div class="grey row">
|
|
<div class="column">Grey</div>
|
|
</div>
|
|
<div class="black row">
|
|
<div class="column">Black</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Centered</h4>
|
|
<p>A grid can have its columns centered</p>
|
|
<div class="ui two column centered grid">
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="four column centered 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">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="four column 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">
|
|
</div>
|
|
<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">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example" data-use-content="true">
|
|
<h4 class="ui header">Text Alignment</h4>
|
|
<p>A grid, row, or column 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="another example">
|
|
<div class="ui center aligned grid">
|
|
<div class="three column row">
|
|
<div class="column">
|
|
<div class="ui vertical fluid menu">
|
|
<div class="header item">
|
|
Cats
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left aligned 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="column">
|
|
<p>Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui right 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" data-use-content="true">
|
|
<h4 class="ui header">Vertical Alignment</h4>
|
|
<p>A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.</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>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui four column centered grid">
|
|
<div class="top aligned 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 class="middle aligned 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 class="bottom aligned 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>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Responsive Variations</h2>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Doubling</h4>
|
|
<p>A grid can double its column width on tablet and mobile sizes</p>
|
|
<div class="ui text message info ignore">
|
|
A grid will round its columns to the closest reasonable value when doubling, for example a <code>five column grid</code> will use <code>2 mobile, 3 tablet, 5 desktop</code>. To force 1 column on mobile you can add <a href="#stackable"><code>stackable</code></a>
|
|
</div>
|
|
<div class="five column doubling ui grid">
|
|
<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">
|
|
</div>
|
|
<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">
|
|
</div>
|
|
<div class="column">
|
|
<img class="ui wireframe image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Stackable</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">
|
|
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">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example" data-use-content="true" data-class="computer reversed, tablet reversed, mobile reversed, computer vertically reversed, mobile vertically reversed, tablet vertically reversed">
|
|
<h4 class="ui header">Reversed</h4>
|
|
<p>A grid or row can specify that its columns should reverse order at different device sizes</p>
|
|
<div class="ui ignored info message message">Reversed grids are compatible with <code>divided</code> grids and other complex grid types.</div>
|
|
<div class="ui computer reversed equal width grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
Computer A Fourth
|
|
</div>
|
|
<div class="column">
|
|
Computer A Third
|
|
</div>
|
|
<div class="column">
|
|
Computer A Second
|
|
</div>
|
|
<div class="column">
|
|
Computer A First
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
Computer B Fourth
|
|
</div>
|
|
<div class="column">
|
|
Computer B Third
|
|
</div>
|
|
<div class="column">
|
|
Computer B Second
|
|
</div>
|
|
<div class="column">
|
|
Computer B First
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui tablet reversed equal width grid">
|
|
<div class="column">
|
|
Tablet Fourth
|
|
</div>
|
|
<div class="column">
|
|
Tablet Third
|
|
</div>
|
|
<div class="column">
|
|
Tablet Second
|
|
</div>
|
|
<div class="column">
|
|
Tablet First
|
|
</div>
|
|
</div>
|
|
<div class="ui mobile reversed equal width grid">
|
|
<div class="column">
|
|
Mobile Fourth
|
|
</div>
|
|
<div class="column">
|
|
Mobile Third
|
|
</div>
|
|
<div class="column">
|
|
Mobile Second
|
|
</div>
|
|
<div class="column">
|
|
Mobile First
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui computer vertically reversed grid">
|
|
<div class="row">
|
|
<div class="column">Computer Row 4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Computer Row 3</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Computer Row 2</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Computer Row 1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui tablet vertically reversed grid">
|
|
<div class="row">
|
|
<div class="column">Tablet Row 4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Tablet Row 3</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Tablet Row 2</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Tablet Row 1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui mobile vertically reversed grid">
|
|
<div class="row">
|
|
<div class="column">Mobile Row 4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Mobile Row 3</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Mobile Row 2</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">Mobile Row 1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example" data-use-content="true" data-class="large screen only, computer only, tablet only, mobile only">
|
|
<h4 class="ui header">Device Visibility</h4>
|
|
<p>A columns or row can appear only for a specific device, or screen sizes</p>
|
|
<div class="ui text message info ignore">
|
|
See <a href="/elements/container.html">container documentation</a> for information on breakpoint calculations
|
|
</div>
|
|
<div class="ui grid">
|
|
<div class="two column large screen only row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Large Screen
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Large Screen
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="two column large screen only row">
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Widescreen
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment">
|
|
Widescreen
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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" data-use-content="true">
|
|
<h4 class="ui header">Responsive Width</h4>
|
|
<p>A column can specify a width for a specific device</p>
|
|
<div class="ui ignored info message">
|
|
<p>It's recommended to use a responsive pattern like <a href="#doubling"><code>doubling</code></a> or <a href="#stackable"><code>stackable</code></a> to reduce complexity when designing responsively, however in some circumstances specifying exact widths for screen sizes may be necessary.</p>
|
|
</div>
|
|
<div class="ui grid">
|
|
<div class="sixteen wide mobile eight wide tablet four wide computer column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="sixteen wide mobile eight wide tablet four wide computer column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="sixteen wide mobile eight wide tablet four wide computer column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="sixteen wide mobile eight wide tablet four wide computer column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="sixteen wide mobile eight wide tablet four wide computer column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui grid">
|
|
<div class="four wide two wide large screen one wide widescreen column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="four wide two wide large screen one wide widescreen column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="four wide two wide large screen one wide widescreen column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="four wide two wide large screen one wide widescreen column">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|