# Layout-Flex-Grid System A traditional 12-column layout system built with Flexbox. It supports auto-layout, column wrapping, offsets, and row-based column sizing. **Category:** Layout **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-layout-layout-flex-grid-system--introduction ## Variants documented in Storybook - Showcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-layout-layout-flex-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 Layout-Flex-Grid System. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Layout

Layout-Flex-Grid System

A traditional 12-column layout system built with Flexbox. It supports auto-layout, column wrapping, offsets, and row-based column sizing.

Comprehensive CSS Class Reference

Every class from the layout library, categorized for easy access.

Base Layout

ROW ux4g-row
COL ux4g-col
COL-AUTO ux4g-col-auto
COL-1 ux4g-col-1
COL-2 ux4g-col-2
COL-3 ux4g-col-3
COL-4 ux4g-col-4
COL-5 ux4g-col-5
COL-6 ux4g-col-6
COL-7 ux4g-col-7
COL-8 ux4g-col-8
COL-9 ux4g-col-9
COL-10 ux4g-col-10
COL-11 ux4g-col-11
COL-12 ux4g-col-12

Row Columns & Offsets

ROW-COLS-1 ux4g-row-cols-1
ROW-COLS-2 ux4g-row-cols-2
ROW-COLS-3 ux4g-row-cols-3
ROW-COLS-4 ux4g-row-cols-4
ROW-COLS-5 ux4g-row-cols-5
ROW-COLS-6 ux4g-row-cols-6
OFFSET-1 ux4g-offset-1
OFFSET-2 ux4g-offset-2
OFFSET-3 ux4g-offset-3
OFFSET-4 ux4g-offset-4
OFFSET-5 ux4g-offset-5
OFFSET-6 ux4g-offset-6
OFFSET-7 ux4g-offset-7
OFFSET-8 ux4g-offset-8
OFFSET-9 ux4g-offset-9
OFFSET-10 ux4g-offset-10
OFFSET-11 ux4g-offset-11

Gutter Classes

NONE ux4g-gutter-none
XS ux4g-gutter-xs
S ux4g-gutter-s
M ux4g-gutter-m
L ux4g-gutter-l
XL ux4g-gutter-xl

Responsive Columns

COL-SM ux4g-col-sm
COL-SM-AUTO ux4g-col-sm-auto
COL-SM-1 ux4g-col-sm-1
COL-SM-2 ux4g-col-sm-2
COL-SM-3 ux4g-col-sm-3
COL-SM-4 ux4g-col-sm-4
COL-SM-5 ux4g-col-sm-5
COL-SM-6 ux4g-col-sm-6
COL-SM-7 ux4g-col-sm-7
COL-SM-8 ux4g-col-sm-8
COL-SM-9 ux4g-col-sm-9
COL-SM-10 ux4g-col-sm-10
COL-SM-11 ux4g-col-sm-11
COL-SM-12 ux4g-col-sm-12
COL-MD ux4g-col-md
COL-MD-AUTO ux4g-col-md-auto
COL-MD-1 ux4g-col-md-1
COL-MD-2 ux4g-col-md-2
COL-MD-3 ux4g-col-md-3
COL-MD-4 ux4g-col-md-4
COL-MD-5 ux4g-col-md-5
COL-MD-6 ux4g-col-md-6
COL-MD-7 ux4g-col-md-7
COL-MD-8 ux4g-col-md-8
COL-MD-9 ux4g-col-md-9
COL-MD-10 ux4g-col-md-10
COL-MD-11 ux4g-col-md-11
COL-MD-12 ux4g-col-md-12
COL-LG ux4g-col-lg
COL-LG-AUTO ux4g-col-lg-auto
COL-LG-1 ux4g-col-lg-1
COL-LG-2 ux4g-col-lg-2
COL-LG-3 ux4g-col-lg-3
COL-LG-4 ux4g-col-lg-4
COL-LG-5 ux4g-col-lg-5
COL-LG-6 ux4g-col-lg-6
COL-LG-7 ux4g-col-lg-7
COL-LG-8 ux4g-col-lg-8
COL-LG-9 ux4g-col-lg-9
COL-LG-10 ux4g-col-lg-10
COL-LG-11 ux4g-col-lg-11
COL-LG-12 ux4g-col-lg-12
COL-XL ux4g-col-xl
COL-XL-AUTO ux4g-col-xl-auto
COL-XL-1 ux4g-col-xl-1
COL-XL-2 ux4g-col-xl-2
COL-XL-3 ux4g-col-xl-3
COL-XL-4 ux4g-col-xl-4
COL-XL-5 ux4g-col-xl-5
COL-XL-6 ux4g-col-xl-6
COL-XL-7 ux4g-col-xl-7
COL-XL-8 ux4g-col-xl-8
COL-XL-9 ux4g-col-xl-9
COL-XL-10 ux4g-col-xl-10
COL-XL-11 ux4g-col-xl-11
COL-XL-12 ux4g-col-xl-12
COL-2XL ux4g-col-2xl
COL-2XL-AUTO ux4g-col-2xl-auto
COL-2XL-1 ux4g-col-2xl-1
COL-2XL-2 ux4g-col-2xl-2
COL-2XL-3 ux4g-col-2xl-3
COL-2XL-4 ux4g-col-2xl-4
COL-2XL-5 ux4g-col-2xl-5
COL-2XL-6 ux4g-col-2xl-6
COL-2XL-7 ux4g-col-2xl-7
COL-2XL-8 ux4g-col-2xl-8
COL-2XL-9 ux4g-col-2xl-9
COL-2XL-10 ux4g-col-2xl-10
COL-2XL-11 ux4g-col-2xl-11
COL-2XL-12 ux4g-col-2xl-12
``` React: ```jsx import React from 'react'; const LayoutFlexGridSystemExample1Demo = () => ( <>
Layout

Layout-Flex-Grid System

A traditional 12-column layout system built with Flexbox. It supports auto-layout, column wrapping, offsets, and row-based column sizing.

Comprehensive CSS Class Reference

Every class from the layout library, categorized for easy access.

{/* Base Layout */}

Base Layout

ROW ux4g-row
COL ux4g-col
COL-AUTO ux4g-col-auto
COL-1 ux4g-col-1
COL-2 ux4g-col-2
COL-3 ux4g-col-3
COL-4 ux4g-col-4
COL-5 ux4g-col-5
COL-6 ux4g-col-6
COL-7 ux4g-col-7
COL-8 ux4g-col-8
COL-9 ux4g-col-9
COL-10 ux4g-col-10
COL-11 ux4g-col-11
COL-12 ux4g-col-12
{/* Row Columns & Offsets */}

Row Columns & Offsets

ROW-COLS-1 ux4g-row-cols-1
ROW-COLS-2 ux4g-row-cols-2
ROW-COLS-3 ux4g-row-cols-3
ROW-COLS-4 ux4g-row-cols-4
ROW-COLS-5 ux4g-row-cols-5
ROW-COLS-6 ux4g-row-cols-6
OFFSET-1 ux4g-offset-1
OFFSET-2 ux4g-offset-2
OFFSET-3 ux4g-offset-3
OFFSET-4 ux4g-offset-4
OFFSET-5 ux4g-offset-5
OFFSET-6 ux4g-offset-6
OFFSET-7 ux4g-offset-7
OFFSET-8 ux4g-offset-8
OFFSET-9 ux4g-offset-9
OFFSET-10 ux4g-offset-10
OFFSET-11 ux4g-offset-11
{/* Gutters */}

Gutter Classes

NONE ux4g-gutter-none
XS ux4g-gutter-xs
S ux4g-gutter-s
M ux4g-gutter-m
L ux4g-gutter-l
XL ux4g-gutter-xl
{/* Responsive Columns */}

Responsive Columns

COL-SM ux4g-col-sm
COL-SM-AUTO ux4g-col-sm-auto
COL-SM-1 ux4g-col-sm-1
COL-SM-2 ux4g-col-sm-2
COL-SM-3 ux4g-col-sm-3
COL-SM-4 ux4g-col-sm-4
COL-SM-5 ux4g-col-sm-5
COL-SM-6 ux4g-col-sm-6
COL-SM-7 ux4g-col-sm-7
COL-SM-8 ux4g-col-sm-8
COL-SM-9 ux4g-col-sm-9
COL-SM-10 ux4g-col-sm-10
COL-SM-11 ux4g-col-sm-11
COL-SM-12 ux4g-col-sm-12
COL-MD ux4g-col-md
COL-MD-AUTO ux4g-col-md-auto
COL-MD-1 ux4g-col-md-1
COL-MD-2 ux4g-col-md-2
COL-MD-3 ux4g-col-md-3
COL-MD-4 ux4g-col-md-4
COL-MD-5 ux4g-col-md-5
COL-MD-6 ux4g-col-md-6
COL-MD-7 ux4g-col-md-7
COL-MD-8 ux4g-col-md-8
COL-MD-9 ux4g-col-md-9
COL-MD-10 ux4g-col-md-10
COL-MD-11 ux4g-col-md-11
COL-MD-12 ux4g-col-md-12
COL-LG ux4g-col-lg
COL-LG-AUTO ux4g-col-lg-auto
COL-LG-1 ux4g-col-lg-1
COL-LG-2 ux4g-col-lg-2
COL-LG-3 ux4g-col-lg-3
COL-LG-4 ux4g-col-lg-4
COL-LG-5 ux4g-col-lg-5
COL-LG-6 ux4g-col-lg-6
COL-LG-7 ux4g-col-lg-7
COL-LG-8 ux4g-col-lg-8
COL-LG-9 ux4g-col-lg-9
COL-LG-10 ux4g-col-lg-10
COL-LG-11 ux4g-col-lg-11
COL-LG-12 ux4g-col-lg-12
COL-XL ux4g-col-xl
COL-XL-AUTO ux4g-col-xl-auto
COL-XL-1 ux4g-col-xl-1
COL-XL-2 ux4g-col-xl-2
COL-XL-3 ux4g-col-xl-3
COL-XL-4 ux4g-col-xl-4
COL-XL-5 ux4g-col-xl-5
COL-XL-6 ux4g-col-xl-6
COL-XL-7 ux4g-col-xl-7
COL-XL-8 ux4g-col-xl-8
COL-XL-9 ux4g-col-xl-9
COL-XL-10 ux4g-col-xl-10
COL-XL-11 ux4g-col-xl-11
COL-XL-12 ux4g-col-xl-12
COL-2XL ux4g-col-2xl
COL-2XL-AUTO ux4g-col-2xl-auto
COL-2XL-1 ux4g-col-2xl-1
COL-2XL-2 ux4g-col-2xl-2
COL-2XL-3 ux4g-col-2xl-3
COL-2XL-4 ux4g-col-2xl-4
COL-2XL-5 ux4g-col-2xl-5
COL-2XL-6 ux4g-col-2xl-6
COL-2XL-7 ux4g-col-2xl-7
COL-2XL-8 ux4g-col-2xl-8
COL-2XL-9 ux4g-col-2xl-9
COL-2XL-10 ux4g-col-2xl-10
COL-2XL-11 ux4g-col-2xl-11
COL-2XL-12 ux4g-col-2xl-12
); export default LayoutFlexGridSystemExample1Demo; ``` Angular: ```html
Layout

Layout-Flex-Grid System

A traditional 12-column layout system built with Flexbox. It supports auto-layout, column wrapping, offsets, and row-based column sizing.

Comprehensive CSS Class Reference

Every class from the layout library, categorized for easy access.

Base Layout

ROW ux4g-row
COL ux4g-col
COL-AUTO ux4g-col-auto
COL-1 ux4g-col-1
COL-2 ux4g-col-2
COL-3 ux4g-col-3
COL-4 ux4g-col-4
COL-5 ux4g-col-5
COL-6 ux4g-col-6
COL-7 ux4g-col-7
COL-8 ux4g-col-8
COL-9 ux4g-col-9
COL-10 ux4g-col-10
COL-11 ux4g-col-11
COL-12 ux4g-col-12

Row Columns & Offsets

ROW-COLS-1 ux4g-row-cols-1
ROW-COLS-2 ux4g-row-cols-2
ROW-COLS-3 ux4g-row-cols-3
ROW-COLS-4 ux4g-row-cols-4
ROW-COLS-5 ux4g-row-cols-5
ROW-COLS-6 ux4g-row-cols-6
OFFSET-1 ux4g-offset-1
OFFSET-2 ux4g-offset-2
OFFSET-3 ux4g-offset-3
OFFSET-4 ux4g-offset-4
OFFSET-5 ux4g-offset-5
OFFSET-6 ux4g-offset-6
OFFSET-7 ux4g-offset-7
OFFSET-8 ux4g-offset-8
OFFSET-9 ux4g-offset-9
OFFSET-10 ux4g-offset-10
OFFSET-11 ux4g-offset-11

Gutter Classes

NONE ux4g-gutter-none
XS ux4g-gutter-xs
S ux4g-gutter-s
M ux4g-gutter-m
L ux4g-gutter-l
XL ux4g-gutter-xl

Responsive Columns

COL-SM ux4g-col-sm
COL-SM-AUTO ux4g-col-sm-auto
COL-SM-1 ux4g-col-sm-1
COL-SM-2 ux4g-col-sm-2
COL-SM-3 ux4g-col-sm-3
COL-SM-4 ux4g-col-sm-4
COL-SM-5 ux4g-col-sm-5
COL-SM-6 ux4g-col-sm-6
COL-SM-7 ux4g-col-sm-7
COL-SM-8 ux4g-col-sm-8
COL-SM-9 ux4g-col-sm-9
COL-SM-10 ux4g-col-sm-10
COL-SM-11 ux4g-col-sm-11
COL-SM-12 ux4g-col-sm-12
COL-MD ux4g-col-md
COL-MD-AUTO ux4g-col-md-auto
COL-MD-1 ux4g-col-md-1
COL-MD-2 ux4g-col-md-2
COL-MD-3 ux4g-col-md-3
COL-MD-4 ux4g-col-md-4
COL-MD-5 ux4g-col-md-5
COL-MD-6 ux4g-col-md-6
COL-MD-7 ux4g-col-md-7
COL-MD-8 ux4g-col-md-8
COL-MD-9 ux4g-col-md-9
COL-MD-10 ux4g-col-md-10
COL-MD-11 ux4g-col-md-11
COL-MD-12 ux4g-col-md-12
COL-LG ux4g-col-lg
COL-LG-AUTO ux4g-col-lg-auto
COL-LG-1 ux4g-col-lg-1
COL-LG-2 ux4g-col-lg-2
COL-LG-3 ux4g-col-lg-3
COL-LG-4 ux4g-col-lg-4
COL-LG-5 ux4g-col-lg-5
COL-LG-6 ux4g-col-lg-6
COL-LG-7 ux4g-col-lg-7
COL-LG-8 ux4g-col-lg-8
COL-LG-9 ux4g-col-lg-9
COL-LG-10 ux4g-col-lg-10
COL-LG-11 ux4g-col-lg-11
COL-LG-12 ux4g-col-lg-12
COL-XL ux4g-col-xl
COL-XL-AUTO ux4g-col-xl-auto
COL-XL-1 ux4g-col-xl-1
COL-XL-2 ux4g-col-xl-2
COL-XL-3 ux4g-col-xl-3
COL-XL-4 ux4g-col-xl-4
COL-XL-5 ux4g-col-xl-5
COL-XL-6 ux4g-col-xl-6
COL-XL-7 ux4g-col-xl-7
COL-XL-8 ux4g-col-xl-8
COL-XL-9 ux4g-col-xl-9
COL-XL-10 ux4g-col-xl-10
COL-XL-11 ux4g-col-xl-11
COL-XL-12 ux4g-col-xl-12
COL-2XL ux4g-col-2xl
COL-2XL-AUTO ux4g-col-2xl-auto
COL-2XL-1 ux4g-col-2xl-1
COL-2XL-2 ux4g-col-2xl-2
COL-2XL-3 ux4g-col-2xl-3
COL-2XL-4 ux4g-col-2xl-4
COL-2XL-5 ux4g-col-2xl-5
COL-2XL-6 ux4g-col-2xl-6
COL-2XL-7 ux4g-col-2xl-7
COL-2XL-8 ux4g-col-2xl-8
COL-2XL-9 ux4g-col-2xl-9
COL-2XL-10 ux4g-col-2xl-10
COL-2XL-11 ux4g-col-2xl-11
COL-2XL-12 ux4g-col-2xl-12
``` ### 2. Showcase — Basic Columns HTML: ```html
ux4g-col-4
ux4g-col-8
ux4g-col-3
ux4g-col-6
ux4g-col-3
``` React: ```jsx import React from 'react'; const LayoutFlexGridSystemExample2Demo = () => ( <>
ux4g-col-4
ux4g-col-8
ux4g-col-3
ux4g-col-6
ux4g-col-3
); export default LayoutFlexGridSystemExample2Demo; ``` Angular: ```html
ux4g-col-4
ux4g-col-8
ux4g-col-3
ux4g-col-6
ux4g-col-3
``` ### 3. Showcase — Auto-Layout HTML: ```html
Equal Width
Equal Width
Equal Width
Auto Width (Content)
Remaining Space
``` React: ```jsx import React from 'react'; const LayoutFlexGridSystemExample3Demo = () => ( <>
Equal Width
Equal Width
Equal Width
Auto Width (Content)
Remaining Space
); export default LayoutFlexGridSystemExample3Demo; ``` Angular: ```html
Equal Width
Equal Width
Equal Width
Auto Width (Content)
Remaining Space
``` ### 4. Showcase — Column Offsets HTML: ```html
Col 4
Col 4 (Offset 4)
``` React: ```jsx import React from 'react'; const LayoutFlexGridSystemExample4Demo = () => ( <>
Col 4
Col 4 (Offset 4)
); export default LayoutFlexGridSystemExample4Demo; ``` Angular: ```html
Col 4
Col 4 (Offset 4)
``` ### 5. Showcase — Row Columns HTML: ```html
Item 1
Item 2
Item 3
Item 4
``` React: ```jsx import React from 'react'; const LayoutFlexGridSystemExample5Demo = () => ( <>
Item 1
Item 2
Item 3
Item 4
); export default LayoutFlexGridSystemExample5Demo; ``` Angular: ```html
Item 1
Item 2
Item 3
Item 4
``` ## 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.