+
+
+
+
+
PageGrid Component Showcase
+
+ A comprehensive guide to using the PageGrid responsive grid system.
+ All examples below use bordered divs to visualize the grid structure.
+
+
`}
+ >
+
+
+ span={6}
+ span={6}
+ [No span set]
+ [No span set]
+
+
+
+
+
+
+ {/* Equal Columns */}
+
+
+
+
+ Column 1
+ Column 2
+ Column 3
+
+`}
+ >
+
+
+ span={4}
+ span={4}
+ span={4}
+
+
+
+
+
+
+ {/* Auto and Fill */}
+
+
+
+
+ Auto
+ Fill
+ Auto
+
+`}
+ >
+
+
+ span="auto"
+ span="fill"
+ span="auto"
+
+
+
+
+
+
+ {/* Responsive Layout */}
+
+
+
+
+
+ Responsive Column
+
+
+`}
+ >
+
+
+
+ base: 4, md: 6, lg: 4
+
+
+ base: 4, md: 6, lg: 4
+
+
+ base: 4, md: 8, lg: 4
+
+
+
+
+
+
+
+ {/* Offsets */}
+
+
+
+
+
+ Centered (8 columns with 2 offset)
+
+
+`}
+ >
+
+
+
+ span={8}, offset: lg: 2
+
+
+
+
+
+
+
+ {/* Responsive Offsets */}
+
+
+
+
+
+ Responsive Offset
+
+
+`}
+ >
+
+
+
+ span={6}, offset: base=0, md=3
+
+
+
+
+
+
+
+ {/* Complex Layout */}
+
+
+
+
+
+ Sidebar
+
+
+ Main Content
+
+
+`}
+ >
+
+
+
+ Sidebar
(base: 4, lg: 4)
+
+
+ Main Content
(base: 4, lg: 8)
+
+
+
+
+
+
+
+ {/* Breakpoints Documentation */}
+
+
+
+
Breakpoints
+
+ The PageGrid system uses the following breakpoints:
+
+
+ {/* Header */}
+
+
Breakpoint
+
Min Width
+
Columns
+
Container Padding
+
+
+ {/* Rows */}
+
+
base
+
0px
+
4 columns
+
16px
+
+
+
sm
+
576px
+
8 columns
+
24px
+
+
+
md
+
576px
+
8 columns
+
24px
+
+
+
lg
+
992px
+
12 columns
+
32px
+
+
+
xl
+
1280px
+
12 columns
+
112px (max-width: 1440px)
+
+
+
+
+ {/* Usage Documentation */}
+
+
+
+
Usage
+
+
Import
+
+
{`import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";`}
+
+
+
Basic Example
+
+
{`
+
+
+ Column 1
+
+
+ Column 2
+
+
+`}
+
+
+
Props
+
+
PageGrid.Col Props
+
+ span - Column span (number, "auto", "fill", or responsive object)offset - Column offset (number or responsive object)className - Additional CSS classes- All standard HTML div attributes
+
+
+
+
Span Values
+
+ - Number (e.g., 1-12): Fixed column width
+ - "auto": Column sizes to its content
+ - "fill": Column fills remaining space
+ - Responsive Object: Different spans for different breakpoints
+
+
+
Best Practices
+
+ - Always wrap columns in a
PageGrid.Row
+ - Use responsive values for mobile-first design
+ - Total column spans in a row should not exceed the grid columns (4 for base, 8 for sm/md, 12 for lg/xl)
+ - Use offsets for spacing and centering content
+ - Test layouts at all breakpoints
+
+
+
+ {/* Visual Grid Demonstration */}
+
+
+
+
Visual Grid Demonstration
+
+ Below is a visual representation of the 12-column grid system at the lg breakpoint:
+
+
+
+ {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((num) => (
+
+ {num}
+
+ ))}
+
+
+
+
+