@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
218 lines (178 loc) • 6.56 kB
CSS
/**
* Grid Layout System
*
* A comprehensive 12-column grid system with utility classes for modern web layouts.
* This system provides flexible grid layouts using CSS Grid with semantic class names
* and responsive capabilities.
*
* @layer layout.grid
* @version 2.0
* @author Design System Team
*
* FEATURES:
* - 12-column grid system with flexible column spans
* - Auto-fit and auto-fill grid layouts for responsive cards
* - Subgrid support for nested layouts
* - Semantic utility classes (.grid, .grid-cols-*, .col-span-*)
* - CSS Grid native implementation (no flexbox fallbacks)
* - Works with spacing.css for gap utilities
* - Compatible with responsive-utilities.css for breakpoint variants
*
* GRID CLASSES:
* - .grid: Base grid container
* - .grid-cols-{1-12}: Define number of columns
* - .col-span-{1-12}: Span multiple columns
* - .col-span-full: Span all available columns
* - .row-span-{1-6}: Span multiple rows
* - .grid-auto-fit: Auto-fit responsive layout
* - .grid-auto-fill: Auto-fill responsive layout
*
* LAYOUT VARIANTS:
* - .layout-grid: Semantic grid with default gutter
* - .layout-grid-{2,3,4,6}: Predefined column layouts
* - .layout-grid-auto-fit: Responsive card layouts
*
* SUBGRID SUPPORT:
* - .grid-subgrid: Inherit parent grid columns
* - .row-subgrid: Inherit parent grid rows
*
* USAGE EXAMPLES:
*
* Basic Grid:
* <div class="grid grid-cols-3 gap-4">
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
* </div>
*
* Responsive Card Layout:
* <div class="grid-auto-fit gap-6">
* <div class="card">Card 1</div>
* <div class="card">Card 2</div>
* <div class="card">Card 3</div>
* </div>
*
* Complex Layout:
* <div class="grid grid-cols-12 gap-4">
* <div class="col-span-8">Main content</div>
* <div class="col-span-4">Sidebar</div>
* <div class="col-span-full">Footer</div>
* </div>
*
* Subgrid Example:
* <div class="grid grid-cols-4 gap-4">
* <div class="col-span-2 grid-subgrid gap-2">
* <div>Nested 1</div>
* <div>Nested 2</div>
* </div>
* </div>
*
* RESPONSIVE USAGE:
* Use with responsive-utilities.css for breakpoint-specific layouts:
* <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
* <!-- Responsive grid that adapts to screen size -->
* </div>
*
* BROWSER SUPPORT:
* - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
* - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
* - Container Queries: Chrome 105+, Firefox 110+, Safari 16+
*
* PERFORMANCE NOTES:
* - CSS Grid is highly optimized for layout performance
* - Subgrid reduces layout recalculations
* - Auto-fit/auto-fill are efficient for responsive designs
* - Use gap properties instead of margins for better performance
*
* ACCESSIBILITY:
* - Grid layouts maintain document flow for screen readers
* - Use semantic HTML elements within grid containers
* - Ensure logical tab order is preserved
* - Test with keyboard navigation
*
* INTEGRATION:
* - Works seamlessly with layout/containers.css for container sizing
* - Combines with layout/spacing.css for gap utilities
* - Enhanced by layout/responsive-utilities.css for responsive variants
* - Compatible with layout/flex-layouts.css for hybrid layouts
*/
@layer layout.grid {
/* ================= GRID-LAYOUT-SYSTEM ================= */
/* Basierend auf dem 12-Spalten-Grid-System, mit einheitlichen Abständen */
.layout-grid {
display: grid;
gap: var(--grid-gutter, 1rem);
grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
}
/* Varianten mit unterschiedlichen Spaltenanzahlen */
.layout-grid-2 {
display: grid;
gap: var(--grid-gutter, 1rem);
grid-template-columns: repeat(2, 1fr);
}
.layout-grid-3 {
display: grid;
gap: var(--grid-gutter, 1rem);
grid-template-columns: repeat(3, 1fr);
}
.layout-grid-4 {
display: grid;
gap: var(--grid-gutter, 1rem);
grid-template-columns: repeat(4, 1fr);
}
.layout-grid-6 {
display: grid;
gap: var(--grid-gutter, 1rem);
grid-template-columns: repeat(6, 1fr);
}
/* Auto-Fit Grid für responsive Karten-Layouts */
.layout-grid-auto-fit {
display: grid;
gap: var(--grid-gutter, 1rem);
grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr));
}
/* ================= SUBGRID / NESTED ================= */
/* Komponenten für verschachtelte Grid-Layouts mit Subgrid */
.grid-subgrid {
display: grid;
grid-template-columns: subgrid;
}
.row-subgrid {
display: grid;
grid-template-rows: subgrid;
}
/* ================= GRID UTILITIES ================= */
/* Grid-Spalten */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr)); }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-fill-min, 200px), 1fr)); }
/* Spaltenspannen für Grid-Items */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }
/* Grid-Zeilen */
.grid-rows-1 { grid-template-rows: repeat(1, 1fr); }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
.grid-rows-3 { grid-template-rows: repeat(3, 1fr); }
.grid-rows-4 { grid-template-rows: repeat(4, 1fr); }
.grid-rows-5 { grid-template-rows: repeat(5, 1fr); }
.grid-rows-6 { grid-template-rows: repeat(6, 1fr); }
/* Zeilen-Span */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }
.row-span-5 { grid-row: span 5; }
.row-span-6 { grid-row: span 6; }
.row-span-full { grid-row: 1 / -1; }
}