Home›Docs›Basic›Grid Layout

Grid Layout

Last updated: 17 days ago

Category: Basic

The grid layout system can replace traditional table layouts; it can simulate tables for data display while also mimicking flexbox for multi-column layouts. This framework primarily uses flexbox and g...

Scrollable Container16 days agoDisplay & Align16 days agoText Direction16 days agoContainer16 days agoFlex Layout16 days agoGrid Layout17 days ago

Features

The framework's grid layout is primarily used for list pages with auto-determined column widths. While sharing similarities with flexbox, grid has its own unique usage patterns.

Grid layout is the optimal replacement for table layouts - maintaining data iteration capabilities while allowing property modifications and cross-device responsiveness. Key features include:

Supports both fence and fluid border styles
Defaults to 4 columns (configurable via _grid-[1~24])
Supports gaps between elements using _g[-*] classes (e.g. _grid _g-sm for 12px gaps)
Automatic column adjustment across devices

Usage

Use parent-child structure (e.g. ul+li). Apply _grid class to parent for equal-width columns.

Output
HTML

- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Custom Column Count

Add _avg-[1~24] to parent to define columns (e.g. _grid _avg-3 for 3 columns).

Output
HTML

2 columns per row
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
5 columns per row
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
6 columns per row
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Fence Grid

Add _fence for table-like grids with internal borders (no outer border). Incomplete rows show border-colored backgrounds.

Add _bd for outer borders.

Output
HTML

No outer border, but has inner border
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
Use the _bd class name to add outer borders
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Fluid Grid

Add _fluid for grids with both internal and external borders. Incomplete rows are ignored.

Output
HTML

- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Fixed Aspect Ratio for Child Elements

Grid layout's aspect ratio is implemented via aspect-ratio CSS property, with several common ratios pre-built:

Class Name	CSS Equivalent	Aspect Ratio	Common Use Case
`_ratio`, `_ratio-1x1`	`aspect-ratio: 1/1`	1:1	Square (default)
`_ratio-16x9`	`aspect-ratio: 16/9`	16:9	HD screens
`_ratio-16x10`	`aspect-ratio: 16/10`	16:10	Approximate golden ratio
`_ratio-4x3`	`aspect-ratio: 4/3`	4:3	Traditional screens
`_ratio-3x2`	`aspect-ratio: 3/2`	3:2	Modern office screens
`_ratio-2x1`	`aspect-ratio: 2/1`	2:1	Landscape mobile screens
`_ratio-21x9`	`aspect-ratio: 21/9`	21:9	Ultra-wide screens
`_ratio-32x9`	`aspect-ratio: 32/9`	32:9	4K ultra-wide screens
`_ratio-5x4`	`aspect-ratio: 5/4`	5:4	Large format cameras
`_ratio-2x3`	`aspect-ratio: 2/3`	2:3	Portrait posters
`_ratio-1x2`	`aspect-ratio: 1/2`	1:2	Portrait mobile screens
`_ratio-9x16`	`aspect-ratio: 9/16`	9:16	Vertical mobile screens

Output
HTML

_ratio，1:1
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_ratio-1x1,1:1
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_ratio-16x9,16:9
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_ratio-16x10,16:10
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_ratio-4x3，4:3
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_ratio-3x2,3:2
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Gap Classes

Grid gaps are created via grid-gap CSS property. _g-* classes modify this property.

Class Name	Description	Example
`_g`	Grid children have 1.4rem gap (same as `_g-sm`)	`<div class="_grid _g"></div>`
`_g-0`	No gap between grid items	`<div class="_grid _g-0"></div>`
`_g-1`	1px gap between grid items	`<div class="_grid _g-1"></div>`
`_g-2`	2px gap between grid items	`<div class="_grid _g-2"></div>`
`_g-3`	3px gap between grid items	`<div class="_grid _g-3"></div>`
`_g-xxs`	0.4rem gap between grid items	`<div class="_grid _g-xxs"></div>`
`_g-xs`	0.8rem gap between grid items	`<div class="_grid _g-xs"></div>`
`_g-sm`	1.4rem gap between grid items	`<div class="_grid _g-sm"></div>`
`_g-md`	2.4rem gap between grid items	`<div class="_grid _g-md"></div>`
`_g-lg`	3.2rem gap between grid items	`<div class="_grid _g-lg"></div>`
`_g-xl`	4rem gap between grid items	`<div class="_grid _g-xl"></div>`
`_g-xxl`	4.8rem gap between grid items	`<div class="_grid _g-xxl"></div>`

Output
HTML

- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-0
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-xxs
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-xs
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-sm
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-md
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-lg
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-xl
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
_g-xxl
- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Gap classes are incompatible with _fence and _fluid border styles.

Unequal Columns

While equal columns are most common, you may need custom widths via grid-template-columns:

grid-template-columns:1fr 2fr - Two columns (second twice as wide)
grid-template-columns: 100px auto 100px - Three columns (fixed side widths)
grid-template-columns: repeat(auto-fill, 100px) - Dynamic columns (100px each)
grid-template-columns: repeat(2, 100px 200px) - Four columns (repeating pattern)

Output
HTML

- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Since inline style attributes have higher specificity than CSS classes, this may override responsive behaviors. Manual adjustments for device adaptation will be required.

Responsive Behavior

Grid automatically adjusts columns across devices.

First Row Only

Add _clip to show only first row in responsive layouts.

Output
HTML

- No.01
- No.02
- No.03
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

The framework also provides _hide-clip - hidden by default but shown in the last item of first row on mobile.

Output
HTML

- No.01
- No.02
- No.03
  Visible on phone
- No.04
- No.05
- No.06
- No.07
- No.08
```
                
                
            
```

Inline styles override responsive classes - manual adjustments required.