# Grid System A modern 12-column responsive layout system built with CSS Grid. It supports explicit column/row definitions, automatic sizing, spanning, and complex item alignment. **Category:** Layout **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-layout-grid-system--introduction ## Variants documented in Storybook - Showcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-layout-grid-system--showcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Grid System. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Layout

Grid System

A modern 12-column responsive layout system built with CSS Grid. It supports explicit column/row definitions, automatic sizing, spanning, and complex item alignment.

Comprehensive CSS Class Reference

Every class from the CSS Grid library, categorized for easy access.

Base & Columns

GRID ux4g-grid
INLINE-GRID ux4g-inline-grid
COLUMNS 1 ux4g-grid-cols-1
COLUMNS 2 ux4g-grid-cols-2
COLUMNS 3 ux4g-grid-cols-3
COLUMNS 4 ux4g-grid-cols-4
COLUMNS 5 ux4g-grid-cols-5
COLUMNS 6 ux4g-grid-cols-6
COLUMNS 7 ux4g-grid-cols-7
COLUMNS 8 ux4g-grid-cols-8
COLUMNS 9 ux4g-grid-cols-9
COLUMNS 10 ux4g-grid-cols-10
COLUMNS 11 ux4g-grid-cols-11
COLUMNS 12 ux4g-grid-cols-12

Rows & Auto Sizing

ROWS 1 ux4g-grid-rows-1
ROWS 2 ux4g-grid-rows-2
ROWS 3 ux4g-grid-rows-3
ROWS 4 ux4g-grid-rows-4
ROWS 5 ux4g-grid-rows-5
ROWS 6 ux4g-grid-rows-6
ROWS 7 ux4g-grid-rows-7
ROWS 8 ux4g-grid-rows-8
ROWS 9 ux4g-grid-rows-9
ROWS 10 ux4g-grid-rows-10
ROWS 11 ux4g-grid-rows-11
ROWS 12 ux4g-grid-rows-12
AUTO-ROWS-AUTO ux4g-auto-rows-auto
AUTO-ROWS-MIN ux4g-auto-rows-min
AUTO-ROWS-MAX ux4g-auto-rows-max
AUTO-ROWS-FR ux4g-auto-rows-fr

Spans & Placement

COLUMN SPAN 1 ux4g-span-1
COLUMN SPAN 2 ux4g-span-2
COLUMN SPAN 3 ux4g-span-3
COLUMN SPAN 4 ux4g-span-4
COLUMN SPAN 5 ux4g-span-5
COLUMN SPAN 6 ux4g-span-6
COLUMN SPAN 7 ux4g-span-7
COLUMN SPAN 8 ux4g-span-8
COLUMN SPAN 9 ux4g-span-9
COLUMN SPAN 10 ux4g-span-10
COLUMN SPAN 11 ux4g-span-11
COLUMN SPAN 12 ux4g-span-12
ROW SPAN 1 ux4g-row-span-1
ROW SPAN 2 ux4g-row-span-2
ROW SPAN 3 ux4g-row-span-3

Alignment & Auto-Fit

PLACE-ITEMS-CENTER ux4g-place-items-center
PLACE-ITEMS-START ux4g-place-items-start
PLACE-ITEMS-END ux4g-place-items-end
JUSTIFY-ITEMS-CENTER ux4g-justify-items-center
ALIGN-ITEMS-CENTER ux4g-align-items-center
AUTO-FIT 200 ux4g-grid-auto-fit-200
AUTO-FIT 250 ux4g-grid-auto-fit-250
AUTO-FIT 300 ux4g-grid-auto-fit-300
AUTO-FIT 400 ux4g-grid-auto-fit-400

Responsive Structure (SM, MD, LG, XL)

GRID-COLS-SM-1 ux4g-grid-cols-sm-1
GRID-COLS-SM-2 ux4g-grid-cols-sm-2
GRID-COLS-SM-3 ux4g-grid-cols-sm-3
GRID-COLS-SM-4 ux4g-grid-cols-sm-4
GRID-COLS-SM-5 ux4g-grid-cols-sm-5
GRID-COLS-SM-6 ux4g-grid-cols-sm-6
GRID-COLS-SM-7 ux4g-grid-cols-sm-7
GRID-COLS-SM-8 ux4g-grid-cols-sm-8
GRID-COLS-SM-9 ux4g-grid-cols-sm-9
GRID-COLS-SM-10 ux4g-grid-cols-sm-10
GRID-COLS-SM-11 ux4g-grid-cols-sm-11
GRID-COLS-SM-12 ux4g-grid-cols-sm-12
GRID-COLS-MD-1 ux4g-grid-cols-md-1
GRID-COLS-MD-2 ux4g-grid-cols-md-2
GRID-COLS-MD-3 ux4g-grid-cols-md-3
GRID-COLS-MD-4 ux4g-grid-cols-md-4
GRID-COLS-MD-5 ux4g-grid-cols-md-5
GRID-COLS-MD-6 ux4g-grid-cols-md-6
GRID-COLS-MD-12 ux4g-grid-cols-md-12
GRID-COLS-LG-1 ux4g-grid-cols-lg-1
GRID-COLS-LG-2 ux4g-grid-cols-lg-2
GRID-COLS-LG-3 ux4g-grid-cols-lg-3
GRID-COLS-LG-4 ux4g-grid-cols-lg-4
GRID-COLS-LG-6 ux4g-grid-cols-lg-6
GRID-COLS-LG-12 ux4g-grid-cols-lg-12
GRID-COLS-XL-2 ux4g-grid-cols-xl-2
GRID-COLS-XL-3 ux4g-grid-cols-xl-3
GRID-COLS-XL-4 ux4g-grid-cols-xl-4
GRID-COLS-XL-6 ux4g-grid-cols-xl-6
GRID-COLS-XL-12 ux4g-grid-cols-xl-12
GRID-ROWS-SM-1 ux4g-grid-rows-sm-1
GRID-ROWS-SM-2 ux4g-grid-rows-sm-2
GRID-ROWS-SM-3 ux4g-grid-rows-sm-3
GRID-ROWS-SM-4 ux4g-grid-rows-sm-4
GRID-ROWS-MD-1 ux4g-grid-rows-md-1
GRID-ROWS-MD-2 ux4g-grid-rows-md-2
GRID-ROWS-MD-3 ux4g-grid-rows-md-3
SPAN-SM-1 ux4g-span-sm-1
SPAN-SM-2 ux4g-span-sm-2
SPAN-SM-3 ux4g-span-sm-3
SPAN-SM-4 ux4g-span-sm-4
SPAN-SM-6 ux4g-span-sm-6
SPAN-SM-12 ux4g-span-sm-12
SPAN-MD-1 ux4g-span-md-1
SPAN-MD-2 ux4g-span-md-2
SPAN-MD-3 ux4g-span-md-3
SPAN-MD-4 ux4g-span-md-4
SPAN-MD-6 ux4g-span-md-6
SPAN-LG-2 ux4g-span-lg-2
SPAN-LG-3 ux4g-span-lg-3
SPAN-LG-4 ux4g-span-lg-4
SPAN-LG-6 ux4g-span-lg-6
PLACE-ITEMS-SM-CENTER ux4g-place-items-sm-center
PLACE-ITEMS-MD-CENTER ux4g-place-items-md-center
PLACE-ITEMS-LG-CENTER ux4g-place-items-lg-center
``` React: ```jsx import React from 'react'; const GridSystemExample1Demo = () => ( <>
Layout

Grid System

A modern 12-column responsive layout system built with CSS Grid. It supports explicit column/row definitions, automatic sizing, spanning, and complex item alignment.

Comprehensive CSS Class Reference

Every class from the CSS Grid library, categorized for easy access.

{/* Base & Structure */}

Base & Columns

GRID ux4g-grid
INLINE-GRID ux4g-inline-grid
COLUMNS 1 ux4g-grid-cols-1
COLUMNS 2 ux4g-grid-cols-2
COLUMNS 3 ux4g-grid-cols-3
COLUMNS 4 ux4g-grid-cols-4
COLUMNS 5 ux4g-grid-cols-5
COLUMNS 6 ux4g-grid-cols-6
COLUMNS 7 ux4g-grid-cols-7
COLUMNS 8 ux4g-grid-cols-8
COLUMNS 9 ux4g-grid-cols-9
COLUMNS 10 ux4g-grid-cols-10
COLUMNS 11 ux4g-grid-cols-11
COLUMNS 12 ux4g-grid-cols-12
{/* Explicit Rows & Auto Sizing */}

Rows & Auto Sizing

ROWS 1 ux4g-grid-rows-1
ROWS 2 ux4g-grid-rows-2
ROWS 3 ux4g-grid-rows-3
ROWS 4 ux4g-grid-rows-4
ROWS 5 ux4g-grid-rows-5
ROWS 6 ux4g-grid-rows-6
ROWS 7 ux4g-grid-rows-7
ROWS 8 ux4g-grid-rows-8
ROWS 9 ux4g-grid-rows-9
ROWS 10 ux4g-grid-rows-10
ROWS 11 ux4g-grid-rows-11
ROWS 12 ux4g-grid-rows-12
AUTO-ROWS-AUTO ux4g-auto-rows-auto
AUTO-ROWS-MIN ux4g-auto-rows-min
AUTO-ROWS-MAX ux4g-auto-rows-max
AUTO-ROWS-FR ux4g-auto-rows-fr
{/* Spans & Placement */}

Spans & Placement

COLUMN SPAN 1 ux4g-span-1
COLUMN SPAN 2 ux4g-span-2
COLUMN SPAN 3 ux4g-span-3
COLUMN SPAN 4 ux4g-span-4
COLUMN SPAN 5 ux4g-span-5
COLUMN SPAN 6 ux4g-span-6
COLUMN SPAN 7 ux4g-span-7
COLUMN SPAN 8 ux4g-span-8
COLUMN SPAN 9 ux4g-span-9
COLUMN SPAN 10 ux4g-span-10
COLUMN SPAN 11 ux4g-span-11
COLUMN SPAN 12 ux4g-span-12
ROW SPAN 1 ux4g-row-span-1
ROW SPAN 2 ux4g-row-span-2
ROW SPAN 3 ux4g-row-span-3
{/* Alignment & Auto-Fit */}

Alignment & Auto-Fit

PLACE-ITEMS-CENTER ux4g-place-items-center
PLACE-ITEMS-START ux4g-place-items-start
PLACE-ITEMS-END ux4g-place-items-end
JUSTIFY-ITEMS-CENTER ux4g-justify-items-center
ALIGN-ITEMS-CENTER ux4g-align-items-center
AUTO-FIT 200 ux4g-grid-auto-fit-200
AUTO-FIT 250 ux4g-grid-auto-fit-250
AUTO-FIT 300 ux4g-grid-auto-fit-300
AUTO-FIT 400 ux4g-grid-auto-fit-400
{/* Responsive Structure */}

Responsive Structure (SM, MD, LG, XL)

GRID-COLS-SM-1 ux4g-grid-cols-sm-1
GRID-COLS-SM-2 ux4g-grid-cols-sm-2
GRID-COLS-SM-3 ux4g-grid-cols-sm-3
GRID-COLS-SM-4 ux4g-grid-cols-sm-4
GRID-COLS-SM-5 ux4g-grid-cols-sm-5
GRID-COLS-SM-6 ux4g-grid-cols-sm-6
GRID-COLS-SM-7 ux4g-grid-cols-sm-7
GRID-COLS-SM-8 ux4g-grid-cols-sm-8
GRID-COLS-SM-9 ux4g-grid-cols-sm-9
GRID-COLS-SM-10 ux4g-grid-cols-sm-10
GRID-COLS-SM-11 ux4g-grid-cols-sm-11
GRID-COLS-SM-12 ux4g-grid-cols-sm-12
GRID-COLS-MD-1 ux4g-grid-cols-md-1
GRID-COLS-MD-2 ux4g-grid-cols-md-2
GRID-COLS-MD-3 ux4g-grid-cols-md-3
GRID-COLS-MD-4 ux4g-grid-cols-md-4
GRID-COLS-MD-5 ux4g-grid-cols-md-5
GRID-COLS-MD-6 ux4g-grid-cols-md-6
GRID-COLS-MD-12 ux4g-grid-cols-md-12
GRID-COLS-LG-1 ux4g-grid-cols-lg-1
GRID-COLS-LG-2 ux4g-grid-cols-lg-2
GRID-COLS-LG-3 ux4g-grid-cols-lg-3
GRID-COLS-LG-4 ux4g-grid-cols-lg-4
GRID-COLS-LG-6 ux4g-grid-cols-lg-6
GRID-COLS-LG-12 ux4g-grid-cols-lg-12
GRID-COLS-XL-2 ux4g-grid-cols-xl-2
GRID-COLS-XL-3 ux4g-grid-cols-xl-3
GRID-COLS-XL-4 ux4g-grid-cols-xl-4
GRID-COLS-XL-6 ux4g-grid-cols-xl-6
GRID-COLS-XL-12 ux4g-grid-cols-xl-12
GRID-ROWS-SM-1 ux4g-grid-rows-sm-1
GRID-ROWS-SM-2 ux4g-grid-rows-sm-2
GRID-ROWS-SM-3 ux4g-grid-rows-sm-3
GRID-ROWS-SM-4 ux4g-grid-rows-sm-4
GRID-ROWS-MD-1 ux4g-grid-rows-md-1
GRID-ROWS-MD-2 ux4g-grid-rows-md-2
GRID-ROWS-MD-3 ux4g-grid-rows-md-3
SPAN-SM-1 ux4g-span-sm-1
SPAN-SM-2 ux4g-span-sm-2
SPAN-SM-3 ux4g-span-sm-3
SPAN-SM-4 ux4g-span-sm-4
SPAN-SM-6 ux4g-span-sm-6
SPAN-SM-12 ux4g-span-sm-12
SPAN-MD-1 ux4g-span-md-1
SPAN-MD-2 ux4g-span-md-2
SPAN-MD-3 ux4g-span-md-3
SPAN-MD-4 ux4g-span-md-4
SPAN-MD-6 ux4g-span-md-6
SPAN-LG-2 ux4g-span-lg-2
SPAN-LG-3 ux4g-span-lg-3
SPAN-LG-4 ux4g-span-lg-4
SPAN-LG-6 ux4g-span-lg-6
PLACE-ITEMS-SM-CENTER ux4g-place-items-sm-center
PLACE-ITEMS-MD-CENTER ux4g-place-items-md-center
PLACE-ITEMS-LG-CENTER ux4g-place-items-lg-center
); export default GridSystemExample1Demo; ``` Angular: ```html
Layout

Grid System

A modern 12-column responsive layout system built with CSS Grid. It supports explicit column/row definitions, automatic sizing, spanning, and complex item alignment.

Comprehensive CSS Class Reference

Every class from the CSS Grid library, categorized for easy access.

Base & Columns

GRID ux4g-grid
INLINE-GRID ux4g-inline-grid
COLUMNS 1 ux4g-grid-cols-1
COLUMNS 2 ux4g-grid-cols-2
COLUMNS 3 ux4g-grid-cols-3
COLUMNS 4 ux4g-grid-cols-4
COLUMNS 5 ux4g-grid-cols-5
COLUMNS 6 ux4g-grid-cols-6
COLUMNS 7 ux4g-grid-cols-7
COLUMNS 8 ux4g-grid-cols-8
COLUMNS 9 ux4g-grid-cols-9
COLUMNS 10 ux4g-grid-cols-10
COLUMNS 11 ux4g-grid-cols-11
COLUMNS 12 ux4g-grid-cols-12

Rows & Auto Sizing

ROWS 1 ux4g-grid-rows-1
ROWS 2 ux4g-grid-rows-2
ROWS 3 ux4g-grid-rows-3
ROWS 4 ux4g-grid-rows-4
ROWS 5 ux4g-grid-rows-5
ROWS 6 ux4g-grid-rows-6
ROWS 7 ux4g-grid-rows-7
ROWS 8 ux4g-grid-rows-8
ROWS 9 ux4g-grid-rows-9
ROWS 10 ux4g-grid-rows-10
ROWS 11 ux4g-grid-rows-11
ROWS 12 ux4g-grid-rows-12
AUTO-ROWS-AUTO ux4g-auto-rows-auto
AUTO-ROWS-MIN ux4g-auto-rows-min
AUTO-ROWS-MAX ux4g-auto-rows-max
AUTO-ROWS-FR ux4g-auto-rows-fr

Spans & Placement

COLUMN SPAN 1 ux4g-span-1
COLUMN SPAN 2 ux4g-span-2
COLUMN SPAN 3 ux4g-span-3
COLUMN SPAN 4 ux4g-span-4
COLUMN SPAN 5 ux4g-span-5
COLUMN SPAN 6 ux4g-span-6
COLUMN SPAN 7 ux4g-span-7
COLUMN SPAN 8 ux4g-span-8
COLUMN SPAN 9 ux4g-span-9
COLUMN SPAN 10 ux4g-span-10
COLUMN SPAN 11 ux4g-span-11
COLUMN SPAN 12 ux4g-span-12
ROW SPAN 1 ux4g-row-span-1
ROW SPAN 2 ux4g-row-span-2
ROW SPAN 3 ux4g-row-span-3

Alignment & Auto-Fit

PLACE-ITEMS-CENTER ux4g-place-items-center
PLACE-ITEMS-START ux4g-place-items-start
PLACE-ITEMS-END ux4g-place-items-end
JUSTIFY-ITEMS-CENTER ux4g-justify-items-center
ALIGN-ITEMS-CENTER ux4g-align-items-center
AUTO-FIT 200 ux4g-grid-auto-fit-200
AUTO-FIT 250 ux4g-grid-auto-fit-250
AUTO-FIT 300 ux4g-grid-auto-fit-300
AUTO-FIT 400 ux4g-grid-auto-fit-400

Responsive Structure (SM, MD, LG, XL)

GRID-COLS-SM-1 ux4g-grid-cols-sm-1
GRID-COLS-SM-2 ux4g-grid-cols-sm-2
GRID-COLS-SM-3 ux4g-grid-cols-sm-3
GRID-COLS-SM-4 ux4g-grid-cols-sm-4
GRID-COLS-SM-5 ux4g-grid-cols-sm-5
GRID-COLS-SM-6 ux4g-grid-cols-sm-6
GRID-COLS-SM-7 ux4g-grid-cols-sm-7
GRID-COLS-SM-8 ux4g-grid-cols-sm-8
GRID-COLS-SM-9 ux4g-grid-cols-sm-9
GRID-COLS-SM-10 ux4g-grid-cols-sm-10
GRID-COLS-SM-11 ux4g-grid-cols-sm-11
GRID-COLS-SM-12 ux4g-grid-cols-sm-12
GRID-COLS-MD-1 ux4g-grid-cols-md-1
GRID-COLS-MD-2 ux4g-grid-cols-md-2
GRID-COLS-MD-3 ux4g-grid-cols-md-3
GRID-COLS-MD-4 ux4g-grid-cols-md-4
GRID-COLS-MD-5 ux4g-grid-cols-md-5
GRID-COLS-MD-6 ux4g-grid-cols-md-6
GRID-COLS-MD-12 ux4g-grid-cols-md-12
GRID-COLS-LG-1 ux4g-grid-cols-lg-1
GRID-COLS-LG-2 ux4g-grid-cols-lg-2
GRID-COLS-LG-3 ux4g-grid-cols-lg-3
GRID-COLS-LG-4 ux4g-grid-cols-lg-4
GRID-COLS-LG-6 ux4g-grid-cols-lg-6
GRID-COLS-LG-12 ux4g-grid-cols-lg-12
GRID-COLS-XL-2 ux4g-grid-cols-xl-2
GRID-COLS-XL-3 ux4g-grid-cols-xl-3
GRID-COLS-XL-4 ux4g-grid-cols-xl-4
GRID-COLS-XL-6 ux4g-grid-cols-xl-6
GRID-COLS-XL-12 ux4g-grid-cols-xl-12
GRID-ROWS-SM-1 ux4g-grid-rows-sm-1
GRID-ROWS-SM-2 ux4g-grid-rows-sm-2
GRID-ROWS-SM-3 ux4g-grid-rows-sm-3
GRID-ROWS-SM-4 ux4g-grid-rows-sm-4
GRID-ROWS-MD-1 ux4g-grid-rows-md-1
GRID-ROWS-MD-2 ux4g-grid-rows-md-2
GRID-ROWS-MD-3 ux4g-grid-rows-md-3
SPAN-SM-1 ux4g-span-sm-1
SPAN-SM-2 ux4g-span-sm-2
SPAN-SM-3 ux4g-span-sm-3
SPAN-SM-4 ux4g-span-sm-4
SPAN-SM-6 ux4g-span-sm-6
SPAN-SM-12 ux4g-span-sm-12
SPAN-MD-1 ux4g-span-md-1
SPAN-MD-2 ux4g-span-md-2
SPAN-MD-3 ux4g-span-md-3
SPAN-MD-4 ux4g-span-md-4
SPAN-MD-6 ux4g-span-md-6
SPAN-LG-2 ux4g-span-lg-2
SPAN-LG-3 ux4g-span-lg-3
SPAN-LG-4 ux4g-span-lg-4
SPAN-LG-6 ux4g-span-lg-6
PLACE-ITEMS-SM-CENTER ux4g-place-items-sm-center
PLACE-ITEMS-MD-CENTER ux4g-place-items-md-center
PLACE-ITEMS-LG-CENTER ux4g-place-items-lg-center
``` ### 2. Showcase — Grid Base HTML: ```html
1
2
3
``` React: ```jsx import React from 'react'; const GridSystemExample2Demo = () => ( <>
1
2
3
); export default GridSystemExample2Demo; ``` Angular: ```html
1
2
3
``` ### 3. Showcase — Grid Columns HTML: ```html
Column
Column
Column
Column
``` React: ```jsx import React from 'react'; const GridSystemExample3Demo = () => ( <>
Column
Column
Column
Column
); export default GridSystemExample3Demo; ``` Angular: ```html
Column
Column
Column
Column
``` ### 4. Showcase — Grid Rows HTML: ```html
Row 1
Row 1
Row 2
Row 2
``` React: ```jsx import React from 'react'; const GridSystemExample4Demo = () => ( <>
Row 1
Row 1
Row 2
Row 2
); export default GridSystemExample4Demo; ``` Angular: ```html
Row 1
Row 1
Row 2
Row 2
``` ### 5. Showcase — Auto Rows HTML: ```html
Short content
Short content
Implicit row with Content height (max-content)
Adjusts based on content
``` React: ```jsx import React from 'react'; const GridSystemExample5Demo = () => ( <>
Short content
Short content
Implicit row with Content height (max-content)
Adjusts based on content
); export default GridSystemExample5Demo; ``` Angular: ```html
Short content
Short content
Implicit row with Content height (max-content)
Adjusts based on content
``` ### 6. Showcase — Span Utilities HTML: ```html
Span 2 Columns
Span 2 Rows
1x1 Item
1x1 Item
``` React: ```jsx import React from 'react'; const GridSystemExample6Demo = () => ( <>
Span 2 Columns
Span 2 Rows
1x1 Item
1x1 Item
); export default GridSystemExample6Demo; ``` Angular: ```html
Span 2 Columns
Span 2 Rows
1x1 Item
1x1 Item
``` ### 7. Showcase — Alignment (Global) HTML: ```html
1
2
3
``` React: ```jsx import React from 'react'; const GridSystemExample7Demo = () => ( <>
1
2
3
); export default GridSystemExample7Demo; ``` Angular: ```html
1
2
3
``` ### 8. Showcase — Auto Fit (Responsive Layout) HTML: ```html

200px Variant (grid-auto-fit-200)

200px Min
200px Min
200px Min

300px Variant (grid-auto-fit-300)

300px Min
300px Min

400px Variant (grid-auto-fit-400)

400px Min (Wide)
400px Min (Wide)
``` React: ```jsx import React from 'react'; const GridSystemExample8Demo = () => ( <>

200px Variant (grid-auto-fit-200)

200px Min
200px Min
200px Min

300px Variant (grid-auto-fit-300)

300px Min
300px Min

400px Variant (grid-auto-fit-400)

400px Min (Wide)
400px Min (Wide)
); export default GridSystemExample8Demo; ``` Angular: ```html

200px Variant (grid-auto-fit-200)

200px Min
200px Min
200px Min

300px Variant (grid-auto-fit-300)

300px Min
300px Min

400px Variant (grid-auto-fit-400)

400px Min (Wide)
400px Min (Wide)
``` ### 9. Showcase — Inline Grid HTML: ```html
A
B
Text next to inline grid
``` React: ```jsx import React from 'react'; const GridSystemExample9Demo = () => ( <>
A
B
Text next to inline grid
); export default GridSystemExample9Demo; ``` Angular: ```html
A
B
Text next to inline grid
``` ### 10. Showcase — Item Alignment HTML: ```html
Centered X
Centered Y
``` React: ```jsx import React from 'react'; const GridSystemExample10Demo = () => ( <>
Centered X
Centered Y
); export default GridSystemExample10Demo; ``` Angular: ```html
Centered X
Centered Y
``` ### 11. Showcase — Responsive Grid HTML: ```html

Responsive Columns (1 on Mobile, 2 on SM, 4 on MD)

Col 1
Col 2
Col 3
Col 4

Responsive Alignment (Centered on MD+)

Centered on MD+
``` React: ```jsx import React from 'react'; const GridSystemExample11Demo = () => ( <>

Responsive Columns (1 on Mobile, 2 on SM, 4 on MD)

Col 1
Col 2
Col 3
Col 4

Responsive Alignment (Centered on MD+)

Centered on MD+
); export default GridSystemExample11Demo; ``` Angular: ```html

Responsive Columns (1 on Mobile, 2 on SM, 4 on MD)

Col 1
Col 2
Col 3
Col 4

Responsive Alignment (Centered on MD+)

Centered on MD+
``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.