Minimal Grid System

A lightweight 12-column flexbox grid.

Demos

Usage

<link rel="stylesheet" href="css/grid.css">

Equal Columns

1/3
1/3
1/3

Fixed Columns

col-4
col-8
col-3
col-6
col-3

Classes

.container - wrapper
.row - flex container
.col - equal column
.col-1 to .col-12
.gap-0 to .gap-4
.align-start|center|end
.justify-start|center|end|between

极简栅格系统

基于 8px 的轻量级 12 列弹性栅格。

示例

使用方法

<link rel="stylesheet" href="css/grid.css">

等宽列

1/3
1/3
1/3

固定列

col-4
col-8

类名说明

.container - 容器
.row - 行
.col - 等宽列
.col-1 至 .col-12 - 固定列
.gap-0 至 .gap-4 - 间距
.m-1 至 .m-4 - 外边距
.p-1 至 .p-4 - 内边距