Responsive grids that adapt automatically to screen size without media queries.
Responsive grids that adapt automatically to screen size
Modern CSS Grid with auto-fit for responsive layouts without media queries
Base class: .grid + .auto-fit-[size][suffix]
Available sizes: Based on $sizes array (220 and above)
Suffixes: none, _, __, -
Automatic gap: var(--32) by default
Cards with minimum width of 220px
Cards with minimum width of 356px
Larger minimum width for feature cards
Automatically adjusts to screen size
No media queries needed
Cards with reduced minimum width using _ suffix
Traditional column-based system with responsive breakpoints
Flexbox-based grid system with dynamic column calculation using CSS variables
Container: .flex-grid or .container:flex-grid (with container queries)
Columns: .col-1 to .col-12
Container queries: Automatic column calculation based on container width
Local control: .max-col-X (1-12) to override grid columns locally
Responsive control: .xs:max-col-X, .sm:max-col-X, .md:max-col-X, .lg:max-col-X, .xl:max-col-X, .xxl:max-col-X
Breakpoints: xs (200px), sm (500px), md (700px), lg (1000px), xl (1200px), xxl (1400px)
Dynamic: Uses CSS variable --grid-columns for calculations
Traditional 12-column grid system
Combining different column sizes
This column takes 8/12 of the available width on desktop, automatically adjusting on tablet and mobile.
This column takes 4/12 of the width.
Override the global grid column count locally using .max-col-X classes
Automatic column calculation using container width
Breakpoint-based column control with responsive prefixes
Breakpoints actifs :
xs (200px+): 2 cols → sm (500px+): 4 cols → md (700px+): 6 cols → lg (1000px+): 8 cols → xl (1200px+): 12 cols
Intuitive fraction-based column system with self-contained width calculations
Self-contained fraction notation that defines both column span and total columns
Pattern: .col-1/X where X defines the total number of columns
Available: .col-1/1 to .col-1/12
Width calculation: Each class defines its own --col-span and --grid-columns
Self-contained: No need for parent container column setup
Examples: col-1/2 = 50%, col-1/3 = 33.33%, col-1/4 = 25%
Simple fraction layouts with self-contained widths
Combining different fraction widths in the same row
Half width content area
Quarter width
Quarter width
Using fractions for responsive card layouts
1/6 width (16.66%)
1/6 width (16.66%)
1/6 width (16.66%)
1/6 width (16.66%)
1/6 width (16.66%)
1/6 width (16.66%)
Avantage des fractions :
Chaque classe col-1/X est autonome et définit sa propre largeur, sans dépendre d'une configuration parent.
Complete list of available fraction notation classes
Classes disponibles :