https://github.com/onface/grid
24格的栅格化
https://github.com/onface/grid
Last synced: 21 days ago
JSON representation
24格的栅格化
- Host: GitHub
- URL: https://github.com/onface/grid
- Owner: onface
- Created: 2016-07-12T03:10:20.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-12T07:10:52.000Z (almost 9 years ago)
- Last Synced: 2025-02-17T09:43:14.272Z (4 months ago)
- Language: HTML
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# woke-grid
> 24格的栅格化
栅格化的设计目的是统一布局，在前端目的是快速开发。使用 `m-grid` 包含 `m-grid-数字` 组成布局。 `m-grid-数字` 的数字只和需要等于 `24`。
## 1-24
````html
m-grid-1
m-grid-23
m-grid-2
m-grid-22
m-grid-3
m-grid-21
m-grid-4
m-grid-20
m-grid-5
m-grid-19
m-grid-6
m-grid-18
m-grid-7
m-grid-17
m-grid-8
m-grid-16
m-grid-9
m-grid-15
m-grid-10
m-grid-14
m-grid-11
m-grid-13
m-grid-12
m-grid-12
m-grid-13
m-grid-11
m-grid-14
m-grid-10
m-grid-15
m-grid-9
m-grid-16
m-grid-8
m-grid-17
m-grid-7
m-grid-18
m-grid-6
m-grid-19
m-grid-5
m-grid-20
m-grid-4
m-grid-21
m-grid-3
m-grid-22
m-grid-2
m-grid-23
m-grid-1
m-grid-24
````
## 4 20
````html
m-grid-4
m-grid-20
````
## 3 3 3 3 3 3 3 3
````html
m-grid-3
m-grid-3
m-grid-3
m-grid-3
m-grid-3
m-grid-3
m-grid-3
m-grid-3
````
/* 用于演示的样式 */
.m-grid-1,
.m-grid-2,
.m-grid-3,
.m-grid-4,
.m-grid-5,
.m-grid-6,
.m-grid-7,
.m-grid-8,
.m-grid-9,
.m-grid-10,
.m-grid-11,
.m-grid-12,
.m-grid-13,
.m-grid-14,
.m-grid-15,
.m-grid-16,
.m-grid-17,
.m-grid-18,
.m-grid-19,
.m-grid-20,
.m-grid-21,
.m-grid-22,
.m-grid-23,
.m-grid-24 {
margin-bottom: 5px;
height: 20px;
line-height:20px;
color:white;
font-size:12px;
}
.m-grid-1,
.m-grid-2,
.m-grid-3,
.m-grid-4,
.m-grid-5,
.m-grid-6,
.m-grid-7,
.m-grid-8,
.m-grid-9,
.m-grid-10,
.m-grid-11,
.m-grid-12 {
background-color:#99CCFF;
box-shadow:inset 0px 0px 5px #44a0fb;
}
.m-grid-13,
.m-grid-14,
.m-grid-15,
.m-grid-16,
.m-grid-17,
.m-grid-18,
.m-grid-19,
.m-grid-20,
.m-grid-21,
.m-grid-22,
.m-grid-23,
.m-grid-24 {
background-color:#0099CC;
box-shadow:inset 0px 0px 5px #0A6586;
}