--- layout : 'default' css : 'Grid' element : 'grid' elementType : 'collection' title : 'Grid' description : 'A grid is used to harmonize negative space in a layout' type : 'UI Collection' themes : ['Default'] --- <%- @partial('header', { tabs: { overview: 'Overview', definition: 'Definition' } }) %>

Overview

Why Use Grids?

A grid is a structure, with a very rich history used to align negative space in your design.

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.

All grid systems use an arbitrary column count. Semantic's default theme assumes 16 columns. This number can be adjusted in your project by adjust the @columnCount value in site.variables.

Grid Row Spacing

Grid columns have vertical spacing above and below each column to create vertical flow between columns. Consecutive grids will automatically preserve row spacing between grids.

The first and last row of columns will set flush with the edge of the grid. To allow first and last columns to have vertical spacing as well use a vertically padded grid variation. To allow horizontal gutters to exist as well use a padded grid
Button before grid
Button after grid

How To Use

Column Flow

A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.

Column Widths

Column widths can be specified using (x) wide class names, each row will add up to 16 columns, if a column cannot fit it will automatically flow to the next row

If you create a grid with only one column, you do not need to specify width, it will automatically be assumed to be a sixteen wide column

Column Count

Grid or individidual grid rows can be divided evenly using (x) column grid or (x) column row

Specifying Alignment

You can specify alignment using alignment variations on a grid, row, or column level.

When multiple floats are used in consecutive rows, you may under some circumstances need to include row wrappers to ensure proper content float

Word Order Requirements

Keep in mind multi-word variations like right floated require you to specify both class names side-by-side, this helps preserve syntax when stacking variations like a right floated left aligned column

Right floated left aligned column
Left floated right aligned column
Center aligned row
Center aligned row
Right Aligned Grid

Rows

Using Rows

Specifying wrapping row elements allows you to manually control line breaks for rows, and use additional row variations.

Why Include Row Markup?

It's often easier to have dynamic content output without nested rows, but using row wrappers is the only way for variations like equal height and vertically divided to function correctly.

Responsive Page Grids

Adding Page Gutters

A page grid is a type of grid designed to provide a responsive container for wrapping the entire contents of your page.

Page Grid Breakpoints

Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will constantly adjust as the browser width changes, giving you the largest possible space for each breakpoint.

Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.

Name Breakpoint Page Gutter Responsive Class Variable
Mobile Below 768px 1rem mobile only $mobileBreakpoint
Tablet Above 768px and below 992px 8% tablet only $tabletBreakpoint
Computer Above 992px 13% computer only $computerBreakpoint
Large Monitor Above 1400px 18% None $largeMonitorBreakpoint
Widescreen Monitor Above 1920px 23% None $widescreenBreakpoint

Responsive Patterns

Semantic includes two common patterns for adjusting grids on different devices.

A Doubling grid automatically doubles its column width on each device jump. For example, four column computer grid, will jump to a two column grid on tablet, and one column on mobile.

Stackable Grid

Stackable grids will not adjust their column width until mobile, where all grid columns will become full width

Formatting Grids

Content Inside Grids

Previous examples were shaded to help show the physical layout of grids, but grids themselves do not provide any styles.

In order to create content segments inside a grid you must specify individual ui elements for example ui segments.

Nesting Grids

You can include grids even inside other grids, this can be useful for things like dividing rows inside of a page grid.

Matching Column Widths on Nested Grids

Each grid is divided into 16 columns, so a grid inside another grid column sub-divides that column into sixteen more columns.

This means, an eight wide column in grid located inside a two wide column, is the same width as a one wide column on the outer grid.

Full Width Backgrounds

Grids use negative margins 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 ui segment.

Due to collapsing margins the parent container must have a clearfix, or overflow:hidden to prevent inheriting the grid's margins.

Second Heading

Second section of content

Second Heading

Second section of content

Row and Column Backgrounds

If you need to specify colors on grid rows of columns, you can use a color variation

Using colored variations on grid columns will require you to use a padded grid variation to avoid coloring in the negative margins of the grid body.

Features

First section of content

Statistics

First section of content

Headline

Second section of content

Sitemap

Second section of content

Contact Us

Second section of content

Types

Page Grid

A page grid is used to layout page contents into a grid system.

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.

Inbox

Welcome to your inbox. Would you like to see more information?

Divided Grid

A grid can have dividers between its columns

How We Collect and Use Information

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.

Information we may receive from third parties

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.

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.

Vertically Divided Grid

A grid can have dividers between rows

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.

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.

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.

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.

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.

Celled Grid

A grid can have rows divided into cells

What are Leaves?

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.

Types of Leaves

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.

One of its leaves can be ten feet across and have a surface area of over 30 square feet.

Elements

Rows

A row is used to create vertical padding between groups of columns on a page.

A
A
A
A
B
B
B
B
B

Columns

Columns each contain gutters giving them equal spacing from other columns.

1
2
3
4

Variations

Grid

Column Count

A grid can have a different number of columns per row

Log-in

Login

Register

Submit

Padded

A grid can preserve its vertical and horizontal gutters on first and last columns

This paragraph of text will not align with the edges of the first column below because the grid preserves its outter gutters

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.

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.

This paragraph of text will not align vertically with the edges of the first column below because the grid preserves its outter gutters

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.

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.

This paragraph of text will not align horizontally with the edges of the first column below because the grid preserves its outter gutters

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.

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.

Relaxed

A grid can increase its gutters to allow for more negative space

Log-in

Login

Register

Submit

Log-in

Login

Register

Submit

Doubling

A grid can double its column width on tablet and mobile sizes

A grid will round its columns to the closest reasonable value when doubling, for example a five column grid will double 1 mobile, 3 tablet, 5 desktop

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Stackable Grid

A grid can have its columns stack on-top of each other after reaching mobile breakpoints

To see a grid stack, try resizing your browser to a small width

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.

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.

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.

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.

Text Alignment

A grid can specify its text alignment

Vertical Alignment

A grid can specify its vertical alignment to have all its columns vertically centered.

Rows

Responsive to Device

A grid can have its columns, or rows only show content for computer, tablet, or mobile.

Breakpoints are 768px and below for mobile, 768-992px for tablet and 992px+ for computer
Mobile
Mobile
Computer
Tablet and Mobile
All Sizes
All Sizes
Computer
Computer
Computer
Computer
Tablet
Tablet
Tablet

Equal Height

A row can specify that it is equal height so all of its columns appear the length of its longest column.

This is a short row

This is a short row

This is a very long row with lots of text in it and way more text than the other rows

It might even span for multiple paragraphs.

Vertical Alignment

A row can also specify its vertical alignment to have its columns vertically centered.

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.

Columns

Floating

A column can be "floated" to either the left or right of its row.

Column Width

A column can vary in width taking up more than a single grid column.

Column One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
Column Two 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.
Column Three 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.