philosophyship-mobile/src/grid.css

philosophship-mobile 手机端H5 ui 样式库

/*
 * @Author: Shenxf 
 * @Date: 2019-07-20 18:17:39 
 * @Last Modified by: Shenxf
 * @Last Modified time: 2019-07-20 22:14:47
 */

/* 网格组件 */
.tt-grid {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
}

/* 网格中的格子 */
.tt-grid>.tt-grid-item {
    position: relative;
    flex: 1 1 33%;
    box-sizing: border-box;
    padding: 1.2rem 0;
    text-align: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

/* 默认是3列 */
.tt-grid .tt-grid-item:nth-child(3n) {
    border-right: none;
}

/* grid内容区 */
.tt-grid>.tt-grid-item>.tt-grid-icon {
    font-size: 1.5rem;
    color: #aaa;
    margin-bottom: .5rem;
}

.tt-grid>.tt-grid-item>.tt-grid-label {
    font-size: .6rem;
    color: #333;
}

/* 不需要边框时取消容器上的border */
.tt-grid.no-border {
    border: none;
}

/* 不需要边框时取消格子上所以的border */
.tt-grid.no-border>.tt-grid-item {
    border: none !important;
}

/* 两列网格 */
.tt-grid.tt-grid-2 .tt-grid-item {
    border-right: 1px solid #ddd;
    flex-basis: 50%;
    padding: 1.8rem 0;
}

.tt-grid.tt-grid-2 .tt-grid-item:nth-child(2n) {
    border-right: none;
}

/* 四列网格 */
.tt-grid.tt-grid-4 .tt-grid-item {
    border-right: 1px solid #ddd;
    flex-basis: 25%;
    padding: .9rem 0;
}

.tt-grid.tt-grid-4 .tt-grid-item:nth-child(4n) {
    border-right: none;
}

/* 五列网格 */
.tt-grid.tt-grid-5 .tt-grid-item {
    border-right: 1px solid #ddd;
    flex-basis: 20%;
    padding: .6rem 0;
}

.tt-grid.tt-grid-5 .tt-grid-item:nth-child(5n) {
    border-right: none;
}