Grid System

The FrankUI grid system is a responsive, mobile-first 12-column layout structure built with Flexbox. It uses containers, rows, and columns to organize, align, and distribute content seamlessly across multiple screen widths.

12-Column Grid Structure

Below is a visual layout of the 12 columns. Column widths are fluid and scale relative to their parent container.

col-1

col-2

col-3

col-4

col-6

col-12

Mixed & Asymmetric Layouts

Combine different column spans within a single row to construct sidebars, detail pages, and dashboards.

col-3 (Sidebar)

col-9 (Main Body Content Area)

col-4

col-8

col-5

col-7

Responsive Breakpoints

Resize your browser window to observe how the elements wrap. This row displays 1 column on mobile devices, 2 columns on tablets (medium screen width), and 4 columns on laptops/desktops (large screen width).

col-md-6 col-lg-3

<!-- 12 Column Grid Example -->
<div class="row">
    <div class="col-1"><div class="demo-col">1</div></div>
    <div class="col-1"><div class="demo-col">2</div></div>
    ...
</div>

<!-- Sidebar Layout (3/9 splits) -->
<div class="row">
    <div class="col-3"><div class="sidebar">Sidebar content</div></div>
    <div class="col-9"><div class="main">Main content</div></div>
</div>

<!-- Responsive Layout (1 col on mobile, 2 col on tablet, 4 col on desktop) -->
<div class="row">
    <div class="col-md-6 col-lg-3">Column 1</div>
    <div class="col-md-6 col-lg-3">Column 2</div>
    <div class="col-md-6 col-lg-3">Column 3</div>
    <div class="col-md-6 col-lg-3">Column 4</div>
</div>

How to Use the Grid

The grid system is designed to structure layout columns with ease. Review these core principles:

Containers: Always place your grid rows inside a container element. Use .container for a centered, fixed-width box (maximum width 1200px) or .container-fluid for a full-width viewport span.
Rows: The row wrapper (.row) acts as a Flexbox flex container and sets negative margins to counter column padding. Columns must always be direct children of a .row.
Columns: Column widths are specified using the format col-[breakpoint]-[width]. Columns are padded with gutters (defined by the CSS custom property --gutter) to provide consistent spacing.

Responsive Breakpoints

The grid includes six responsive breakpoint modifiers that activate on defined viewport minimum widths:

Breakpoint Class Prefix	Target Viewport Minimum Width	Common Devices
.col-[1-12]	< 576px	Mobile Phones (vertical/default)
.col-sm-[1-12]	≥ 576px	Landscape Phones & Small Tablets
.col-md-[1-12]	≥ 768px	Medium Tablets & Small Viewports
.col-lg-[1-12]	≥ 992px	Laptops & Desktops
.col-xl-[1-12]	≥ 1200px	Large Desktop Displays
.col-xxl-[1-12]	≥ 1400px	Extra Large Screens
.col-xxxl-[1-12]	≥ 1600px	Ultra-wide Monitors