Grids

npm install pui-css-grids --save

Pivotal ui (via bootstrap) includes a responsive, mobile first fluid grid system that appropriately scales up to 24 columns as the device or viewport size increases. To work with the system, you need to treat mobile as your default and build more complex layouts up from there.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the bootstrap grid system works:

  • Rows must be placed within a .container for proper alignment and padding.

  • Use .row to create horizontal groups of columns.

  • Content should be placed within columns (e.g. .col-sm-11, .col-lg-6, etc.). Only columns may be immediate children of rows.

Columns are defined by two properties: the breakpoint at which they start acting like columns, and their relative width (on a scale of 24) beginning at this breakpoint. For example:

  • A column with the class .col-sm-11 will take up 100% of the container for devices with screen-width < 768px (the extra small breakpoint), and 11/24ths for devices ≥ 768px.

  • A column with the class .col-lg-6 will take up 100% of the container for devices with < 1200px, and 1/4th (6/24ths) for devices ≥ 1200px.

  • 3 .col-md-8 columns would fill a row for devices ≥ 992px. They would each take up their own row on devices < 992px.

  • Use the .col-xs-* classes to use a grid on mobile.

Look to the examples for applying these principles to your code.

Media Queries

We use the following media queries in our sass files to create the key breakpoints in our grid system.

Name Size Variable Name
mobile no media query since this is the default in bootstrap
x-small 480px $screen-xs-min
small 768px $screen-sm-min
medium 992px $screen-md-min
large 1200px $screen-lg-min
x-large 1800px $screen-xl-min

Grid Sizes

See how aspects of the bootstrap grid system work across multiple devices with a handy table.

extra small devices phones (≤768px) small devices tablets (>768px) medium devices laptops (>992px) large devices desktops (>1200px)
grid behavior horizontal at all times collapsed to start, horizontal above breakpoints
container width none (auto) 750px 970px 1170px
class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 24
column width auto ~62px ~81px ~97px
gutter width 30px (15px on each side of a column)
nestable yes
offsets yes
column ordering yes

Examples

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

The .grid-show class in the examples is for demo purposes. Don't use it IRL.

Example: Mobile and Desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

Example: Mobile, Tablet, Desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

Example: Column Wrapping

If more than 24 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

note In the second row, since 10 + 10 + 5 > 24, the 5-column-wide div gets wrapped onto a new line as one contiguous unit. Subsequent columns continue along the new line.

Gutter Sizes

You can change the size of a row's gutters with these classes.

Class Padding between columns
default 20px
.row-gutter-md 10px
.row-gutter-sm 5px

Here's what the gutters look like in action.

Responsive Column Resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Offsetting Columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Column Ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes. This is useful if you want to change the order of columns at different screen sizes.

Flex Grids

npm install pui-css-flex-grids --save

Examples

The .grid-show class in the examples is for demo purposes. Don"t use it IRL.

Gutters

You can create a flex grid with and without gutters. Here are examples of what each would look like.

Sizing

Using a single set of .col-n grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .grid:

You can also specify how the columns grow with .col-grow-n (n = 2 - 11). These columns will attempt to respect their given ratio until the content of the column exceeds their parameters, after which the column will drop onto another row:

Fixing Column Size

You can fix the width of a column by using the .col-fixed class.

Break Points

You can specify three different media breakpoints with the .col-sm, .col-md, and .col-lg classes.

Alignment

Aligning columns relative to the grid:

Aligning content relative to the column it is in:

Some content that sits at the top of the column
Some content that sits in the middle of the column
Some content that sits at the bottom of the column

This documentation generated using Hologram