MJ Grid Framework – Complete Documentation
A responsive, mobile-first CSS grid and flexbox framework built with vanilla CSS. No preprocessor required. Supports 6 responsive breakpoints with intuitive naming conventions.
Responsive Breakpoints
Our framework uses industry-standard breakpoints aligned with Tailwind CSS conventions:
| Prefix | Screen Size | Device Type | Example Usage |
|---|---|---|---|
| .col-1 ... .col-4 | 0px – 639px | Mobile phones | Default (no prefix) |
| .col-s-1 ... .col-s-12 | 640px+ | Small / Landscape phones | <div class="col-s-6"> |
| .col-m-1 ... .col-m-12 | 768px+ | Tablets (iPad) | <div class="col-m-6"> |
| .col-l-1 ... .col-l-12 | 1024px+ | Laptops / Desktops | <div class="col-l-6"> |
| .col-xl-1 ... .col-xl-12 | 1280px+ | Large desktops | <div class="col-xl-8"> |
| .col-xxl-1 ... .col-xxl-12 | 1536px+ | Extra large / 4K screens | <div class="col-xxl-10"> |
Tip: We use mobile-first design. Default classes (col-1, col-2) apply to all screen sizes.
Breakpoint-specific classes (col-s-, col-m-, col-l-, etc.) override defaults at that breakpoint and above.
CSS Grid System
The grid adapts to screen size with different column counts per breakpoint:
Grid Column Count by Breakpoint
Mobile (0–639px): 1 column
Small (640px+): 12 columns
Tablet (768px+): 12 columns
Laptop (1024px+): 12 columns
Large Desktop (1280px+): 12 columns
XXL Screen (1536px+): 12 columns
Small (640px+): 12 columns
Tablet (768px+): 12 columns
Laptop (1024px+): 12 columns
Large Desktop (1280px+): 12 columns
XXL Screen (1536px+): 12 columns
Basic Grid Setup
<div class="grid">
<div class="column">Auto column</div>
<div class="column">Auto column</div>
<div class="column">Auto column</div>
</div>
<div class="column">Auto column</div>
<div class="column">Auto column</div>
<div class="column">Auto column</div>
</div>
Live Example: Responsive Grid
↳ Resize your browser to see the grid adapt!
Mobile: 1 column | Small+: 12 columns
col-s-6 col-m-4 col-l-4
col-s-6 col-m-4 col-l-4
col-s-6 col-m-4 col-l-4
col-s-6 col-m-6 col-l-6
col-s-12 col-m-6 col-l-6
Complex Layout Example
<div class="grid">
<div class="column col-m-2 col-l-3">Sidebar</div>
<div class="column col-m-4 col-l-6">Main content 1</div>
<div class="column col-m-2 col-l-3">Sidebar 2</div>
<div class="column col-m-6 col-l-12">Full width footer</div>
</div>
<div class="column col-m-2 col-l-3">Sidebar</div>
<div class="column col-m-4 col-l-6">Main content 1</div>
<div class="column col-m-2 col-l-3">Sidebar 2</div>
<div class="column col-m-6 col-l-12">Full width footer</div>
</div>
Sidebar + Content + Full Width
Sidebar
Main Content
Sidebar 2
Full Width Footer
Column Span Classes
Use column classes to control how many columns an element spans:
Mobile (Default)
All columns default to full width (stacked)
Tablet (768px+) — 12 Column Grid
.col-m-1 = span 1 column
.col-m-3 = span 3 columns (1/4 width)
.col-m-6 = span 6 columns (half width)
.col-m-8 = span 8 columns
.col-m-12 = span 12 columns (full width)
.col-m-3 = span 3 columns (1/4 width)
.col-m-6 = span 6 columns (half width)
.col-m-8 = span 8 columns
.col-m-12 = span 12 columns (full width)
Desktop (1024px+) — 12 Column Grid
⚡ Note: Use .col-l-* or .col-s-*, .col-m-* prefixed classes for precise control at each breakpoint.
Prefixed (precise control):
.col-s-* @ 640px+
.col-m-* @ 768px+
.col-l-* @ 1024px+
.col-xl-* @ 1280px+
.col-xxl-* @ 1536px+
Common widths:
.col-l-3 = span 3 columns (1/4 width)
.col-l-8 = span 8 columns (2/3 width)
.col-s-* @ 640px+
.col-m-* @ 768px+
.col-l-* @ 1024px+
.col-xl-* @ 1280px+
.col-xxl-* @ 1536px+
Common widths:
.col-l-3 = span 3 columns (1/4 width)
.col-l-8 = span 8 columns (2/3 width)
Live Example: Different Column Spans
Desktop: .col-l-3, .col-l-6, .col-l-3
col-l-3 (1/4)
col-l-6 (1/2)
col-l-3 (1/4)
Desktop: .col-l-2, .col-l-2, .col-l-2, .col-l-2, .col-l-2, .col-l-2
2
2
2
2
2
2
Responsive Column Combinations
Combine multiple breakpoint classes to control layout at each screen size:
<div class="column col-m-3 col-l-3">Item 1</div>
<div class="column col-m-3 col-l-3">Item 2</div>
<div class="column col-m-3 col-l-3">Item 3</div>
<div class="column col-m-3 col-l-3">Item 4</div>
<div class="column col-m-3 col-l-3">Item 2</div>
<div class="column col-m-3 col-l-3">Item 3</div>
<div class="column col-m-3 col-l-3">Item 4</div>
Mobile: Full width (stacks) | Tablet: 2 columns (col-m-6 = half) | Desktop: 4 columns (col-l-3 = quarter)
Resize to see: Mobile → Tablet (2 cols) → Desktop (4 cols)
Item 1
Item 2
Item 3
Item 4
Example: Hero + Sidebar Layout
<div class="column col-m-6 col-l-8">Hero section (2/3 width)</div>
<div class="column col-m-6 col-l-4">Sidebar (1/3 width)</div>
<div class="column col-m-6 col-l-4">Sidebar (1/3 width)</div>
Desktop: 8 columns + 4 columns
Hero Section (2/3)
Sidebar (1/3)
Column Positioning (Advanced)
Manually position columns using start and end points (available at 1024px+ only):
.col-start-1 to .col-start-12 = Position column start
.col-end-2 to .col-end-13 = Position column end
.col-span-1 to .col-span-12 = Span X columns
.col-end-2 to .col-end-13 = Position column end
.col-span-1 to .col-span-12 = Span X columns
Example: Skip Columns
<div class="column col-start-3 col-l-4">Start at column 3</div>
Desktop only: Positioned columns
Start 2, span 3
Start 6, span 4
Grid Gap & Spacing
Control the spacing between grid items:
.grid = Default gap (20px)
.grid.gap-half = Half gap (10px)
.grid.gap-0 = No gap (0px)
.grid.gap-half = Half gap (10px)
.grid.gap-0 = No gap (0px)
Live Examples
Default gap (20px)
Default gap
20px spacing
Default gap
20px spacing
Half gap (10px)
Smaller gap
10px spacing
Smaller gap
10px spacing
No gap (0px)
No gap
0px spacing
No gap
0px spacing
🔄 Flexbox System
Alternative layout system for flexible box layouts:
Flex Classes
.flex = Flex container
.flex-col = Flex column item
.flex-row = Row wrapper
.flex-direction-column = Column direction
.flex-wrap-wrap = Allow wrapping
.flex-col = Flex column item
.flex-row = Row wrapper
.flex-direction-column = Column direction
.flex-wrap-wrap = Allow wrapping
Flex Grid Columns
Mobile (0–639px):
.flex-col = 100% (1 column)
Tablet (768px+):
.flex-col = 33.33% (3 columns)
Desktop (1024px+):
.flex.cols-2 .flex-col = 50%
.flex.cols-3 .flex-col = 33.33%
.flex.cols-4 .flex-col = 25%
...up to .flex.cols-12 .flex-col = 8.33%
.flex-col = 100% (1 column)
Tablet (768px+):
.flex-col = 33.33% (3 columns)
Desktop (1024px+):
.flex.cols-2 .flex-col = 50%
.flex.cols-3 .flex-col = 33.33%
.flex.cols-4 .flex-col = 25%
...up to .flex.cols-12 .flex-col = 8.33%
Live Examples
Desktop: .flex.cols-3 (3 columns)
Item 1
Item 2
Item 3
Desktop: .flex.cols-4 (4 columns)
Item 1
Item 2
Item 3
Item 4
Code Example
<div class="flex cols-3">
<div class="flex-col">Item 1</div>
<div class="flex-col">Item 2</div>
<div class="flex-col">Item 3</div>
</div>
<div class="flex-col">Item 1</div>
<div class="flex-col">Item 2</div>
<div class="flex-col">Item 3</div>
</div>
✅ Best Practices
1. Mobile-First Approach
Always start with mobile (default classes) and add breakpoint-specific classes for larger screens.
❌ Wrong: <div class="col-l-6 col-m-4">
✅ Right: <div class="col-1 col-m-2 col-l-6">
❌ Wrong: <div class="col-l-6 col-m-4">
✅ Right: <div class="col-1 col-m-2 col-l-6">
2. Use Semantic Container Widths
<div class="container">
<div class="grid">
<div class="column col-m-3 col-l-4">Content</div>
</div>
</div>
<div class="grid">
<div class="column col-m-3 col-l-4">Content</div>
</div>
</div>
3. Combine Grid & Flex Wisely
Use Grid when: You need precise 12-column layouts with explicit positioning
Use Flex when: You need flexible, auto-sizing items that wrap naturally
Use Flex when: You need flexible, auto-sizing items that wrap naturally
4. Gap Consistency
The grid uses CSS variables for gaps. Customize them in your variables file:
--gap-default: 20px
--gap-half: 10px
--gap-default: 20px
--gap-half: 10px
🛠 Helpful Utilities
Width Classes
.w-1 to .w-100 = Width percentages (5%, 10%, 15%...)
.w-s-1 to .w-s-100 = Width at 640px+
.w-m-1 to .w-m-100 = Width at 768px+
.w-l-1 to .w-l-100 = Width at 1024px+
.w-xl-1 to .w-xl-100 = Width at 1280px+
.w-s-1 to .w-s-100 = Width at 640px+
.w-m-1 to .w-m-100 = Width at 768px+
.w-l-1 to .w-l-100 = Width at 1024px+
.w-xl-1 to .w-xl-100 = Width at 1280px+
Example: Responsive Widths
<div class="w-100 w-m-50 w-l-33">
Full on mobile, 50% on tablet, 33% on desktop
</div>
Full on mobile, 50% on tablet, 33% on desktop
</div>
🐛 Troubleshooting
❓ My columns don't align properly
Make sure you're using consistent prefixes across your layout. All breakpoints 640px and above use a 12-column grid, so col-s-6, col-m-6, col-l-6 will always span half-width at their respective breakpoints.
❓ Flex items aren't wrapping
Add .flex-wrap-wrap to your .flex container to enable wrapping.
❓ Columns are too narrow/wide
All breakpoints (640px and above) use a 12-column grid. Use the appropriate prefix for your breakpoint:
.col-s-6 = half width at 640px+
.col-m-6 = half width at 768px+
.col-l-6 = half width at 1024px+
.col-s-6 = half width at 640px+
.col-m-6 = half width at 768px+
.col-l-6 = half width at 1024px+