css栅格化

css栅格化

UI组件库的基石

整个css布局的核心知识

.row {
    display: flex;
    height: 100px;
}

.col {
    height: 100%;
}

.col-1 {
    flex: 0 0 10%;
}

.col-2 {
    flex: 0 0 20%;
}

.col-3 {
    flex: 0 0 30%;
}

.col-4 {
    flex: 0 0 40%;
}

.col-5 {
    flex: 0 0 50%;
}

.col-6 {
    flex: 0 0 60%;
}

.col-7 {
    flex: 0 0 70%;
}

.col-8 {
    flex: 0 0 80%;
}

.col-9 {
    flex: 0 0 90%;
}

.col-10 {
    flex: 0 0 100%;
}

Bootstrap

1. 比较早使用css栅格化的ui组件库
2. 它可以单独使用，不挑前端框架

官方文档

https://v4.bootcss.com/