📐 Grid System Documentation
Complete guide for implementing responsive layouts with the Etihad Element Design System grid system
📚 Foundation
Core concepts and fundamental principles of the grid system
Overview
The Etihad Element Design System uses a 12-column responsive grid system based on flexbox. It provides flexible, mobile-first layouts with support for multiple breakpoints and alignment options.
Key Features
- ✅ 12-column flexible grid system
- ✅ 5 responsive breakpoints (xs, sm, md, lg, xl)
- ✅ Flexbox-based for modern browser support
- ✅ Mobile-first approach
- ✅ Support for column offset and reordering
- ✅ Built-in alignment and distribution utilities
- ✅ Visibility classes for responsive hiding/showing
Getting Started
Basic Structure
The grid consists of rows and columns:
<div class="ey-row">
<div class="ey-column-xs-12 ey-column-md-6">Column 1</div>
<div class="ey-column-xs-12 ey-column-md-6">Column 2</div>
</div>
Column 1
Column 2
Tip: Always use
.ey-row as the container and
.ey-column-*
classes for child elements.
Responsive Breakpoints
The grid system supports 5 responsive breakpoints. Use these prefixes to create responsive layouts:
XS
Extra Small (Mobile)
0 - 576px
SM
Small (Tablet)
577px - 992px
MD
Medium (Small Desktop)
993px - 1200px
LG
Large (Desktop)
1201px - 1400px
XL
Extra Large (Large Desktop)
1401px+
Mobile-First Approach: Always design for mobile first and add breakpoints as
screens get larger.
⚛️ Atoms
Basic building blocks: rows and columns
Row Classes
Configure row behavior with these utility classes:
| Class | Description | Use Case |
|---|---|---|
.ey-row |
Define element as a row container | Required for all grid layouts |
.reverse |
Reverse the order of children | Reorder items without HTML changes |
.flex-column |
Stack items vertically | Vertical layouts |
.natural-height |
Children heights match their content | Flexible height layouts |
Example: Reverse Order
<div class="ey-row reverse">
<div class="ey-column">First (displays last)</div>
<div class="ey-column">Second (displays first)</div>
</div>
Column Classes
Basic Column Types
| Class | Description |
|---|---|
.ey-column |
Auto-width column (equal share) |
.ey-column-xs |
Auto-width on XS and up |
.ey-column-sm |
Auto-width on SM and up |
.ey-column-md |
Auto-width on MD and up |
.ey-column-lg |
Auto-width on LG and up |
.ey-column-xl |
Auto-width on XL screens |
Auto Width Example
<div class="ey-row">
<div class="ey-column"></div>
<div class="ey-column"></div>
<div class="ey-column"></div>
</div> <!-- Each column gets 33.33% width -->
Auto 1
Auto 2
Auto 3
🧬 Molecules
Combining components: sizing, spacing, and alignment
Column Sizing
Fixed Column Widths
Specify exact column widths using numbers 1-12:
| Number | Width | Class Example |
|---|---|---|
| 1 | 8.33% | .ey-column-xs-1 |
| 3 | 25% | .ey-column-xs-3 |
| 6 | 50% | .ey-column-xs-6 |
| 9 | 75% | .ey-column-xs-9 |
| 12 | 100% | .ey-column-xs-12 |
Responsive Sizing Example
Different widths at different breakpoints:
<div class="ey-row">
<div class="ey-column-xs-12 ey-column-sm-6 ey-column-md-4 ey-column-lg-3">
Responsive Column
</div>
</div>
At different breakpoints:
- XS (0-575px): Full width (12 columns)
- SM (576px): Half width (6 columns)
- MD (768px): One third (4 columns)
- LG (992px): One quarter (3 columns)
Responsive
Responsive
Column Offset
Add left margin to shift columns using offset classes:
<div class="ey-row">
<div class="ey-column-xs-offset-3 ey-column-xs-9">
Shifted 3 columns from left
</div>
</div>
Offset 3
Offset 6
Responsive Offset
Use different offsets at different breakpoints:
.ey-column-xs-offset-12 <!-- Hide on mobile -->
.ey-column-sm-offset-6 <!-- Offset on tablets -->
.ey-column-md-offset-3 <!-- Offset on tablets landscape -->
.ey-column-lg-offset-0 <!-- No offset on desktop -->
Alignment
Horizontal Alignment
Align columns horizontally within a row:
| Class | Behavior |
|---|---|
.start-* |
Align to start/left |
.center-* |
Align to center |
.end-* |
Align to end/right |
<div class="ey-row center-xs">
<div class="ey-column-xs-6">Centered</div>
</div>
Centered
Vertical Alignment
Align columns vertically within a row:
| Class | Behavior |
|---|---|
.top-* |
Align to top |
.middle-* |
Align to middle |
.bottom-* |
Align to bottom |
<div class="ey-row middle-xs" style="height: 150px;">
<div class="ey-column">Vertically Centered</div>
</div>
Responsive Alignment
Mix different alignment classes for different breakpoints:
<div class="ey-row start-xs center-sm end-md middle-lg">
<div class="ey-column-xs-6">Responsive Alignment</div>
</div>
Distribution
Distribute space between or around columns:
| Class | Behavior |
|---|---|
.around-* |
Equal space around each column |
.between-* |
Equal space between columns |
<!-- Space around items -->
<div class="ey-row around-xs">
<div class="ey-column-xs-3"></div>
<div class="ey-column-xs-3"></div>
<div class="ey-column-xs-3"></div>
</div>
<!-- Space between items -->
<div class="ey-row between-xs">
<div class="ey-column-xs-3"></div>
<div class="ey-column-xs-3"></div>
<div class="ey-column-xs-3"></div>
</div>
🌍 Organisms
Complex patterns: ordering, visibility, and advanced layouts
Reordering Columns
Change the visual order of columns without modifying HTML:
| Class | Description |
|---|---|
.first-* |
Move column to first position |
.last-* |
Move column to last position |
<div class="ey-row">
<div class="ey-column">1</div>
<div class="ey-column last-xs">2 (displays last on mobile)</div>
<div class="ey-column">3</div>
</div>
Responsive Reordering
Different order on different breakpoints:
.first-xs <!-- First on mobile -->
.last-md <!-- Last on tablets -->
.first-lg <!-- First on desktop -->
Visibility Classes
Show or hide elements at specific breakpoints:
| Class Pattern | Description |
|---|---|
.show-* |
Show element at breakpoint and up |
.show-*-only |
Show element only at specific breakpoint |
.hide-* |
Hide element at breakpoint and up |
.hide-*-only |
Hide element only at specific breakpoint |
Show Examples
.show <!-- Always visible -->
.show-xs <!-- Visible on XS and up -->
.show-xs-only <!-- Visible only on XS -->
.show-md <!-- Visible on MD and up (hidden on XS, SM) -->
.show-lg-only <!-- Visible only on LG -->
Hide Examples
.hide <!-- Always hidden -->
.hide-xs <!-- Hidden on XS and up -->
.hide-xs-only <!-- Hidden only on XS -->
.hide-md <!-- Hidden on MD and up -->
.hide-sm-only <!-- Hidden only on SM -->
Common Use Cases
<!-- Show different layouts on mobile vs desktop -->
<div class="show-xs-only">
<!-- Mobile sidebar -->
</div>
<div class="hide-xs">
<!-- Desktop navigation -->
</div>
Nesting Grids
Create complex layouts by nesting rows and columns:
<div class="ey-row">
<div class="ey-column-xs-8">
<!-- Nested grid -->
<div class="ey-row">
<div class="ey-column-xs-6">Nested Column 1</div>
<div class="ey-column-xs-6">Nested Column 2</div>
</div>
</div>
<div class="ey-column-xs-4">Sidebar</div>
</div>
Tip: When nesting, the nested row's 12 columns are relative to its parent
column,
not the entire page width.
Usage Examples
Example 1: Two-Column Layout
50-50 split on desktop, stacked on mobile:
<div class="ey-row">
<div class="ey-column-xs-12 ey-column-md-6">
Left Column
</div>
<div class="ey-column-xs-12 ey-column-md-6">
Right Column
</div>
</div>
Example 2: Sidebar Layout
Main content with fixed sidebar:
<div class="ey-row">
<div class="ey-column-xs-12 ey-column-md-8">
Main Content
</div>
<div class="ey-column-xs-12 ey-column-md-4">
Sidebar
</div>
</div>
Example 3: Three-Column Layout
Responsive three-column layout:
<div class="ey-row">
<div class="ey-column-xs-12 ey-column-sm-6 ey-column-md-4">Column 1</div>
<div class="ey-column-xs-12 ey-column-sm-6 ey-column-md-4">Column 2</div>
<div class="ey-column-xs-12 ey-column-sm-6 ey-column-md-4">Column 3</div>
</div>
Example 4: Centered Content
Centered content with max width:
<div class="ey-row center-xs">
<div class="ey-column-xs-12 ey-column-md-8">
Centered Content
</div>
</div>
Best Practices
✅ Do
- Start with mobile first design using
ey-column-xs-* - Use meaningful class combinations for readability
- Test layouts at all breakpoints
- Use auto-width columns when appropriate
- Nest grids for complex layouts
- Use visibility classes for responsive hiding
- Keep nesting depth reasonable (max 2-3 levels)
❌ Don't
- Use hard-coded pixel widths on grid columns
- Skip the
.ey-rowcontainer - Use column classes without breakpoint prefix
- Nest rows beyond 3 levels deep
- Mix different grid systems
- Override grid styles with inline CSS
- Forget to test on mobile devices
Performance Tips
- Minimize class combinations when possible
- Use flexbox utilities efficiently
- Avoid unnecessary nesting
- Test layout performance on real devices
Accessibility Tips
- Ensure content is readable at all breakpoints
- Use semantic HTML in grid containers
- Test keyboard navigation
- Ensure sufficient color contrast
- Use
roleattributes when needed