|
|
---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" /><script src="/javascript/grid.js"></script>
<%- @partial('header', { tabs: { overview: 'Overview', definition: 'Definition' } }) %>
<div class="main container">
<div class="ui active tab" data-tab="overview">
<h3 class="ui dividing header">Grids</h3>
<div class="highlighted example"> <h4 class="ui header">Why Use Grids?</h4> <div class="ignored"> <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">very rich history</a> used to align negative space in your design.</p> <p>Using a grid makes content appear to flow naturally on your page, and allows you to quickly adjust layouts without assigning specific sizes directly to content elements, letting you rapidly prototype and design your page.</p> <div class="ui toggle animation checkbox"> <input type="checkbox" name="animation" /> <label>Toggle Animation</label> </div> </div> <div class="ui ignored info message"> <p>All grid systems use an arbitrary column count. Semantic's default theme assumes <b>16 columns</b>. This number can be adjusted in your project by adjust the <code>@columnCount</code> value in <code>site.variables</code>.</p> </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"> <h4 class="ui header">Specifying Column Widths</h4> <p>Column widths can be specified either using <code>(x) wide</code> class names or subdividing a grid or row using an <code>(x) column grid</code> or <code>(x) column row</code></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> </div> <div class="another highlighted example"> <div class="ui two column grid"> <div class="column"></div> <div class="column"></div> <div class="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"> <h4 class="ui header">Column Flow</h4> <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> </div>
<div class="highlighted example"> <h4 class="ui header">Specifying Rows</h4> <p>Specifying wrapping <code>row</code> elements allows you to manually control line breaks for rows, and use additional row variations.</p> <div class="ui ignored info icon message"> <i class="help circle icon"></i> <div class="content"> <div class="header">Why Include Row Markup?</div> <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> </div> </div>
<div class="ui grid"> <div class="twelve wide column"></div> <div class="four column row"> <div class="right floated column"></div> <div class="left 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"> <h4 class="ui header">Specifying Alignment</h4> <p>You can specify alignment using alignment variations on a grid, row, or column level.</p> <div class="ui ignored info message"> <div class="header">Word Order Requirements</div> <p>Keep in mind multi-word variations like <code>right floated</code> <b>require you to specify both class names side-by-side</b>, this helps preserve syntax when stacking variations like a <code>right floated left aligned column</code></p> </div>
<div class="ui right aligned grid"> <div class="right floated left aligned six wide column"> <div class="ui segment"> Right floated left aligned </div> </div> <div class="left floated right aligned six wide column"> <div class="ui segment"> Left floated right aligned </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>
<div class="highlighted negative example"> <h4 class="ui header">Grid Row Spacing</h4> <p>Grid columns have vertical spacing above and below each column to create vertical flow between columns.</p> <div class="ui ignored warning message"> Grids use negative margins to ensure the first and last row of columns will set flush with the edge of the grid. Consecutive grids will automatically preserve row spacing between grids. To allow first and last columns to have vertical padding use a <code>vertically padded grid</code> variation. </div> <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="highlighted special example"> <h4 class="ui header">Nesting Grids</h4> <p>You can include grids even inside other grids, this can be useful for things like dividing rows inside of a page grid.</p> <div class="ui ignored info message"> <div class="ui header">Matching Column Widths on Nested Grids</div> <p>Each grid is divided into 16 columns, so a grid inside another grid column <b>sub-divides that column into sixteen more columns</b>.</p> <p>This means, an <code>eight wide column</code> in grid located inside a <code>two wide column</code>, is the same width as a <code>one wide column</code> on the outer grid.</p> </div>
<div class="ui two column page grid"> <div class="column"> <div class="ui two column grid"> <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="eight wide column"></div> <div class="eight wide column"></div> </div> </div> </div> </div>
<h3 class="ui dividing header">Page Grids</h3>
<div class="highlighted example"> <h4 class="ui header">Page Gutters</h4> <p>A page grid is designed to provide a responsive container suitable for wrapping the entire contents of your page.</p> <div class="ui page 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="no example"> <h4 class="ui header">Page Grid Breakpoints</h4> <p>Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint</p> <p><code>grid</code> <code>row</code> and <code>column</code> all can receive responsive classes to make them appear only on a particular device.</p> <table class="ui black celled table"> <thead> <tr> <th>Name</th> <th>Breakpoint</th> <th>Page Gutter</th> <th>Responsive Class</th> <th>Variable</th> </tr> </thead> <tbody> <tr> <td>Mobile</td> <td>Below 768px</td> <td>1rem</td> <td>mobile only</td> <td>$mobileBreakpoint</td> </tr> <tr> <td>Tablet</td> <td>Above 768px and below 992px</td> <td>8%</td> <td>tablet only</td> <td>$tabletBreakpoint</td> </tr> <tr> <td>Computer</td> <td>Above 992px</td> <td>13%</td> <td>computer only</td> <td>$computerBreakpoint</td> </tr> <tr> <td>Large Monitor</td> <td>Above 1400px</td> <td>18%</td> <td><em>None</em></td> <td>$largeMonitorBreakpoint</td> </tr> <tr> <td>Widescreen Monitor</td> <td>Above 1920px</td> <td>23%</td> <td><em>None</em></td> <td>$widescreenBreakpoint</td> </tr> </tbody> </table> </div>
<h3 class="ui dividing header">Formatting Grids</h3>
<div class="animated example"> <h4 class="ui header">Content Inside Grids</h4> <p>Previous examples were shaded to help show the physical layout of grids, but grids themselves do not provide any styles.</p> <p class="ignored">In order to create content segments inside a grid you must specify individual <code>ui elements</code> for example <a href="/elements/segment.html">ui segments</a>.</p> <div class="ui five column grid"> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/elliot.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/matt.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/jenny.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/steve.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/stevie.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/veronika.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/justen.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/tom.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/helen.jpg" class="ui fluid image"> </div> </div> <div class="column"> <div class="ui segment"> <img src="/images/avatar/large/christian.jpg" class="ui fluid image"> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Full Width Backgrounds</h4> <p>Grids use <b>negative margins</b> to remove first and last column margins, this means you cannot directly apply a background color on a grid. To add a background try wrapping your grid inside another container, for example a <code>ui segment</code>.</p> <div class="ui ignored warning message"> Due to <a href="http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing" target="_blank">collapsing margins</a> the parent container must have a clearfix, or <code>overflow:hidden</code> to prevent inheriting the grid's margins. </div> <div class="ui inverted teal vertical segment"> <div class="ui page grid"> <div class="column"> <h2 class="ui inverted header">Second Heading</h2> <p>Second section of content</p> </div> </div> </div> <div class="ui inverted black vertical segment"> <div class="ui page grid"> <div class="column"> <h2 class="ui inverted header">Second Heading</h2> <p>Second section of content</p> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Row and Column Backgrounds</h4> <p>If you need to specify colors on grid rows of columns, you can use a <b>color variation</b></p> <div class="ui info message ignored"> <p>Using colored variations on grid columns will require you to use a <code>padded grid</code> variation to avoid coloring in the negative margins of the grid body.</p> </div> <div class="ui padded grid"> <div class="two column row"> <div class="white column"> <h2 class="ui header">Features</h2> <p>First section of content</p> </div> <div class="teal column"> <h2 class="ui inverted header">Statistics</h2> <p>First section of content</p> </div> </div> <div class="black row"> <div class="column"> <h2 class="ui inverted header">Headline</h2> <p>Second section of content</p> </div> </div> <div class="eight wide teal column"> <h2 class="ui inverted header">Sitemap</h2> <p>Second section of content</p> </div> <div class="eight wide white column"> <h2 class="ui header">Contact Us</h2> <p>Second section of content</p> </div> </div> </div>
</div>
<div class="ui tab" data-tab="definition">
<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 three column divided grid"> <div class="column"> <h5 class="ui header">How We Collect and Use Information</h5> <p>We ask for certain information such as your username, real name, birthdate, address, phone number and e-mail address when you register for a Semantic UI account, or if you correspond with us. We may also retain any messages you send through the Service, and may collect information you provide in User Content you post to the Service. We use this information to operate, maintain, and provide to you the features and functionality of the Service. Your username and if you choose to disclose it, your real name, will be published publicly. Once published your username and / or real name may not be able to be removed.</p> </div> <div class="column"> <h5 class="ui header"> Information we may receive from third parties </h5> <p>We may receive information about you from third parties. For example, if you access our websites or Service through a third-party connection or log-in, for example, through Facebook Connect, by “following,” “liking,” adding the Semantic UI application, linking your account to the Semantic UI Service, etc., that third party may pass certain information about your use of its service to Semantic UI. This information could include, but is not limited to, the user ID associated with your account (for example, your Facebook UID), an access token necessary to access that service, any information that you have permitted the third party to share with us, and any information you have made public in connection with that service. </p> </div> <div class="column"> <p>Semantic UI may, in its sole discretion, develop a feature that allows you to invite third parties to the Service. If you choose to use our invitation service to invite a third party to the Service through our “Invite friends” feature, you may directly choose a friend to invite through your mobile device’s native contact list – but we do not require that you import your contacts list to the Service, and we do not retain the information contained in your contacts list. You understand that by inviting a friend to Semantic UI through the “Invite friends” feature, you are directly sending a text or email from your personal accounts and that we are not storing your contact list. In addition, you understand and agree that normal carrier charges apply to communications sent from you phone. Since this invitation is coming directly from your email or phone, we do not have access to or control this communication.</p> </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="three wide column"> <img src="/images/leaves/2.png" class="ui fluid image"> </div> <div class="three wide column"> <img src="/images/leaves/5.png" class="ui fluid image"> </div> <div class="three wide column"> <img src="/images/leaves/6.png" class="ui fluid image"> </div> <div class="seven wide column"> <h3 class="ui green header">What are Leaves?</h3> <p>A leaf is an above-ground plant organ. Its main functions are photosynthesis and gas exchange. A leaf is often flat, so it absorbs the most light, and thin, so that the sunlight can get to the chloroplasts in the cells.</p> </div> </div> <div class="row"> <div class="three wide column"> <img src="/images/leaves/4.png" class="ui fluid image"> </div> <div class="ten wide column"> <h3 class="ui green header">Types of Leaves</h3> <p>Leaves come in many shapes and sizes. The biggest undivided leaf is that of a giant edible aroid. This lives in marshy parts of the tropical rain forest of Borneo.</p> <p> One of its leaves can be ten feet across and have a surface area of over 30 square feet. </p> </div> <div class="three wide column"> <img src="/images/leaves/7.png" class="ui fluid image"> </div> </div> </div> </div>
<h2 class="ui dividing header">Elements</h2>
<div class="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="four column 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> <div class="five column 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> </div> </div> <div class="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">Column Count</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="inline field"> <div class="ui checkbox"> <input type="checkbox" id="remember" /> <label for="remember">Remember me</label> </div> </div> <div class="ui submit button">Login</div> </div> </div> <div class="column"> <div class="ui fluid form segment"> <h3 class="ui header">Register</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="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">Padded</h4> <p>A grid can preserve its vertical and horizontal gutters on first and last columns</p>
<p>This paragraph of text will not align with the edges of the first column below because the grid preserves its outter gutters</p> <div class="ui two column padded 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> </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 class="another example"> <p>This paragraph of text will not align vertically with the edges of the first column below because the grid preserves its outter gutters</p> <div class="ui two column vertically padded 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> </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 class="another example"> <p>This paragraph of text will not align horizontally with the edges of the first column below because the grid preserves its outter gutters</p> <div class="ui two column horizontally padded 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> </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 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</h4> <p>A grid can double its column width on tablet and mobile sizes</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>
</div>
|
