DS nav
GridDyn Component Demo
A comprehensive exploration of the GridDyn component's capabilities, including all props, configurations, and use cases.
1. Default Grid (12x columns)
Basic usage with default settings: 12 columns, 1 row, 0.5rem gutters. Items without --span will take 1 column by default.
1b. Default Grid (3 columns)
Basic usage with default settings: 3 columns, 1 row, 0.5rem gutters. Items without --span will take 1 column by default.
Basic usage with default settings: 12 columns, 1 row, 0.5rem gutters. Items without --span will take 1 column by default.
2. Column Spanning with --span
Use inline CSS custom property --span to control how many columns an item spans. Common layout patterns: 3+3+3+3, 4+4+4, 6+6, full width.
3. Custom Column Count
Change the total number of columns using the columns prop. Here's a 6-column grid with various spans.
4. Four-Column Grid
Perfect for card layouts, product grids, or gallery displays. 4-column grid with equal-width items.
5. Custom Gutter Sizes
Control horizontal (gutterX) and vertical (gutterY) spacing independently. This example uses large gutters: 4vw horizontal, 3rem vertical.
6. Tight Gutters (Compact Grid)
Minimal spacing for dense layouts like dashboards or data displays. Using 0.25rem gutters for a compact appearance.
7. Multi-Row Grid Layout
Specify both rows and columns to create defined grid structures. This 3-row by 4-column grid demonstrates explicit grid sizing.
8. Grid with Background Color
Apply a background color to the grid container using the backgroundColor prop. Useful for creating visual sections or highlighting content areas.
9. Theme and Typography Variants
Use dataTheme and dataTypo props to apply different styling contexts. These attributes cascade to child elements for consistent theming.
Dark Theme Applied
Typography variant: comic
Inherited Context
Child elements inherit data attributes
10. Asymmetric Hero Layout
Create interesting compositions with varied column spans. Common pattern: large hero image (8 cols) with sidebar content (4 cols).
Main Hero Content
This takes up 8 of 12 columns, creating a dominant focal point. Perfect for hero sections, featured content, or primary CTAs.
Sidebar
Complementary content in 4 columns. Great for:
- Navigation
- Related links
- Secondary info
- Testimonials
Main Hero Content
This takes up 5 of 12 columns, creating a dominant focal point. Perfect for hero sections, featured content, or primary CTAs.
Sidebar
Complementary content in 7 columns. Great for:
- Navigation
- Related links
- Secondary info
- Testimonials
10b. Popout w/ Asymmetric Hero Layout
Create interesting compositions with varied column spans. Common pattern: large hero image (8 cols) with sidebar content (4 cols).
Main Hero Content
This takes up 8 of 12 columns, creating a dominant focal point. Perfect for hero sections, featured content, or primary CTAs.
Sidebar
Complementary content in 4 columns. Great for:
- Navigation
- Related links
- Secondary info
- Testimonials
11. Logo/Brand Grid (Real-World Example)
Based on your original example: displaying partner logos or brand assets. 6-column grid with 2-column and 3-column spans for visual rhythm.
12. Mixed Content Types
Combine text, images, and different content types in a single grid. Demonstrates real-world content flexibility.
Text Block
Pure text content spanning 4 columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ideal for article intros or descriptions.
Image Placeholder
4 columns
Stats
Active users
Feature Highlight
Half-width content (6 of 12 columns). Perfect for paired features, before/after comparisons, or dual content presentation.
Another Feature
Matching width creates visual balance and symmetry. Users naturally compare side-by-side content.
Full-Width CTA Section
Spanning all 12 columns for maximum impact
13. Custom Classes for Extended Styling
Pass custom classes via the class prop to add your own styles or behaviors. This example adds rounded corners and a shadow to the grid container.
14. Zero Gutters (Seamless Layout)
Set gutters to "0" for completely seamless layouts. Useful for image galleries, color palettes, or tiled interfaces.
15. Magazine-Style Editorial Layout
Complex composition with varied column spans creates visual interest. Mimics traditional print magazine layouts with hierarchy and flow.
Featured Story
The main article takes center stage with 8 columns of commanding presence
Side Story 1
Secondary content in the sidebar provides context and related information.
Article 2
Smaller story unit
Article 3
Another bite-sized piece
Article 4
Completing the row
Full-width advertisement or promotional banner
16. Dashboard / Admin Panel Layout
Typical dashboard pattern: full-width header, mixed-width stat cards, and data visualization areas. Demonstrates practical application.
Dashboard Header
Total Sales
New Users
Conversion
Bounce Rate
Chart / Graph Area (8 columns)
Recent Activity
• New order #1234
• Payment received
• Profile updated
• Comment posted
Component Props Summary
The GridDyn component accepts the following props:
columns: number (default: 12) - Number of grid columns
gutterX: string (default: ".5rem") - Horizontal gap between items
gutterY: string (default: ".5rem") - Vertical gap between items
backgroundColor: string - Background color of grid container
dataTheme: string - Theme variant for styling context
dataTypo: string - Typography variant
class: string - Additional CSS classes
Children elements can use --span CSS custom property to control column span
Best Practices
1. Use 12-column grid for maximum flexibility (easily divisible by 2, 3,
4, 6)
2. Specify gutterX and gutterY explicitly for consistency
3. Use --span for responsive column widths rather than fixed widths
4. Consider viewport units (vw) for gutters on full-width layouts
5. Combine with Box and SectionLayout for proper page structure
6. Use dataTheme consistently across related components
7. Test with actual content, not just placeholders
