The Grid System
Design framework to create layouts that adapts seamlessly to various screen sizes and devices, such as smartphones, tablets, and desktop computers. Powered by flexbox, the Grid System enhances usability and accessibility by ensuring that webpages look good and function well on any device.
How It Works
- The Grid System also takes the mobile first approach. When a grid level is defined, e.g. .col-sm-4, this means a column will take 4 spaces out of 12 in a row for all of the device sizes: sm, md, lg, xl, xxl.
- Each .col-* must be wrapped within .hpu-row to apply the necessary padding and placement.
- Each .hpu-row must then be wrapped by .hpu-container or .hpu-container-fluid to pad your contents horizontally and vertically.
- Columns can be sized differently according to the device width. See Mix and Match Section.
Grid Options
The Grid System can adapt to the 6 breakpoints. Each of the breakpoints have their own container, unique class prefix, and modifiers. Below is how the grid changes across these breakpoints:
|
Extra Small Screens < 576px |
Small Screens ≥ 576px |
Medium Screens ≥ 768px |
Large Screens ≥ 992px |
X-Large Screens ≥ 1200px |
XX-Large Screens ≥ 1400px |
|
|---|---|---|---|---|---|---|
| Container max-width | None (auto) | 540px | 720px | 960px | 1120px | 1320px |
| Class Prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
The Grid System features a maximum of 12 columns. If more than 12 columns are added, they will automatically wrap to the next line. Additionally, all grid columns can be nested within each other.
Enabling the Grid System and Setting Equal Column Auto-Width for All Devices
All of the .col-* (column) must be wrapped in .hpu-row to enable the flex behavior for each column.
NOTE: The main wrapper is using the .hpu-container to show the content width. Please refer to HPUCSS Containers for usage guides.
CURRENT SCREEN SIZE: xs sm md lg xl xxl
.col
.col
.col
.col
.col
Setting One-Column Width
If a column needs to have a specific span size, add the number of columns needed on one of the columns, then let all the other columns resize themselves: .col-{1 - 12}.
CURRENT SCREEN SIZE: xs sm md lg xl xxl
.col
.col-3
.col
.col
.col-8
.col
All Screen Sizes, Same Width
Ensure a consistent grid width across all screen sizes by defining a 12-column layout for the entire row: .col-{1 - 12}.
CURRENT SCREEN SIZE: xs sm md lg xl xxl
.col-3
.col-4
.col-5
.col-2
.col-2
.col-4
.col-2
.col-2
Columns Stack Horizontally
When a breakpoint is reached, columns will stack horizontally: .col-{sm | md | lg | xl | xxl}.
CURRENT SCREEN SIZE: xs sm md lg xl xxl
.col-sm
.col-sm
.col-md
.col-md
.col-lg
.col-lg
.col-xl
.col-xl
.col-xxl
.col-xxl
Columns Stack Horizontally with Column Widths
Sets a specific width then columns stack horizontally when a breakpoint is reached: .col-{sm | md | lg | xl | xxl}-{1 - 12}.
CURRENT SCREEN SIZE: xs sm md lg xl xxl
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-md-4
.col-md-4
.col-md-4
.col-lg-6
.col-lg-3
.col-lg-3
.col-xl-2
.col-xl-8
.col-xl-2
.col-xxl-6
.col-xxl-6
Mix and Match
If a different layout is desired for different screen widths, it is possible utilize a combination of various classes for each tier as required. Remember that the Grid System is super flexible and responsive!
CURRENT SCREEN SIZE: xs sm md lg xl xxl
.col-xxl-3
.col-xl-6
.col-lg-4
.col-md-2
.col-sm
.col-xxl-3
.col-xl-6
.col-lg-4
.col-md-2
.col-sm
.col-xxl-3
.col-xl-6
.col-lg-4
.col-md-2
.col-sm
.col-xxl-3
.col-xl-6
.col-lg-4
.col-md-2
.col-sm
Nesting
A grid system nested within another grid system, creating a layered grid structure.
CURRENT SCREEN SIZE: xs sm md lg xl xxl
Level 1:
.col-sm-3
Level 2:
.col-lg-7 .col-md-6
Level 2:
.col-lg-5 .col-md-6
No Gap Columns
By default, each column has padding around the content:
.col-lg-6
.col-lg-6
.col-lg-6
.col-lg-6
To remove the padding around the column, simply add .no-gap alongside the .hpu-row class:
.col-lg-6
.col-lg-6
.col-lg-6
.col-lg-6