- Flex Grids
- Media Queries
- Grid Sizes
- Gutter Sizes
- Responsive Column Resets
- Offsetting Columns
- Column Ordering
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.
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
.containerfor proper alignment and padding.
.rowto create horizontal groups of columns.
Content should be placed within columns (e.g.
.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-11will 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-6will take up 100% of the container for devices with < 1200px, and 1/4th (6/24ths) for devices ≥ 1200px.
.col-md-8columns would fill a row for devices ≥ 992px. They would each take up their own row on devices < 992px.
.col-xs-*classes to use a grid on mobile.
Look to the examples for applying these principles to your code.
We use the following media queries in our sass files to create the key breakpoints in our grid system.
|mobile||no media query since this is the default in bootstrap|
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|
|# of columns||24|
|gutter width||30px (15px on each side of a column)|
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
.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-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
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.
You can change the size of a row's gutters with these classes.
|Class||Padding between columns|
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
and our responsive utility classes.
Move columns to the right using
These classes increase the left margin of a column by
.col-md-4 over four columns.
Easily change the order of our built-in grid columns
.col-md-pull-* modifier classes.
This is useful if you want to change the order of columns at different screen sizes.
npm install pui-css-flex-grids --save
.grid-show class in the examples is for demo purposes. Don"t use it IRL.
You can create a flex grid with and without gutters. Here are examples of what each would look like.
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
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
You can specify three different media breakpoints with the
.col-sm, .col-md, and .col-lg classes.
Aligning columns relative to the grid:
Aligning content relative to the column it is in: