Grid

A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.

Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.

Inbox

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

A grid can have dividers between its columns

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.

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.

A grid can have rows divided into cells

Lorem ipsum do

Lorem ipsum dolor

Lorem ipsum dolor sitos. 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.

A grid can split its columns evenly

Username

Password

Login

First Name

Last Name

Username

Password

I agree to the terms and conditions

Submit

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

Username

Password

Login

First Name

Last Name

Username

Password

I agree to the terms and conditions

Submit

A grid can double its column sizes when being viewed at tablet or mobile resolutions

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.

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.

A grid can specify its text alignment

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

A row can split its columns evenly

Two

Three

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

Computer

Tablet and Mobile

All Sizes

Computer

Tablet

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 very long row with lots of text in it and way more text than the other rows

It might even span for multiple paragraphs.

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.

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

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

Column width is based off a 16 column grid, even if you are using a different row or grid column count, for instance a three wide column inside a three column grid will only take up three-sixteenths of the grid width.

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.

Standard

Grid

Page Grid

Divided Grid

Vertically Divided Grid

Celled Grid

Elements

Rows

Columns

Variations

Grid

Specifying Grid Column Count

Log-in

Register

Relaxed

Log-in

Register

Doubling Grid

Stackable Grid

Text Alignment

Vertical Alignment

Rows

Specifying Row Column Count

Responsive to Device

Equal Height

Vertical Alignment

Columns

Floating

Column Width