css grid 布局相关

运行效果

CSS代码

.grid-container-problem-1-border-1 {
    display: grid;
}

.grid-container-problem-1-border-1 .grid-item-problem-border {
    margin: 0px -1px -1px 0px;
    border: 1px solid;
}
            

运行效果

CSS代码

.grid-container-problem-1-border-2 {
    display: grid;
    grid-gap: 1px;
}

.grid-container-problem-1-border-2 .grid-item-problem-border {
    outline: 1px solid;
}
            

运行效果

CSS代码

.grid-container-problem-1-border-3 {
    display: grid;
}

.grid-container-problem-1-border-3 .grid-item-problem-border {
    position: relative;
}

.grid-container-problem-1-border-3 .grid-item-problem-border::after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0px;
    bottom: 0px;
    left: -1px;
    border: 1px solid;
}
            

运行效果

CSS代码

.grid-container-problem-1-border-4 {
    display: grid;
    grid-gap: 1px;
}

.grid-container-problem-1-border-4 .grid-item-problem-border {
    box-shadow: 0 0 0 1px;
}