grid简单布局

138 阅读1分钟
        height:calc(~'100vh - 420px');
        width:100%;
        display: grid;
        grid-template-columns: repeat(5,1fr);//列高
        grid-template-rows: repeat(2,1fr);//行高
        row-gap: 8px;//行间距
        column-gap: 8px;//列间距
    div:nth-child(7){
        grid-column-start: 3;//列起始位置
        grid-column-end: span 2;//列结束位置
    }
    div:nth-child(8){
        grid-row-start: 1;
        grid-row-end: span 2;//占位2
        grid-column-start: 5;
}