Skip to main content


The grid is mobile-first, and based on a 12-column system. The grid includes gutters, column spanning, 4 breakpoints, and column alignment.

How it Works

The grid system is responsive meaning that the same content can be designed for multiple devices. A breakpoint is the point at which a website will adapt the same page content across several different viewports. 

The State of Oklahoma Web Framework is designed for two breakpoints; one at 768px wide and above with a max container width of 1176px; and one below 768px. The grid is used for all existing pages on the website. 

How to Use

The grid is essentially an organizing device. Below are the suggesting configurations of column width. The larger breakpoint can accommodate for the division of content across columns.

768 and Above

Max Container Width 1176

Below 768px

Last Modified on Nov 10, 2020
Back to Top