.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.parent div {
    background-color: #0a789b;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}
.parent div:hover{

}
.parent .item_mask {
    margin-top: 166px;
    height: 64px;
    text-align: center;
    color: #fff;
    z-index: 1;
    background: rgba(0, 0, 0, .9);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));

}

.parent .item_mask2 {
    margin-top: 46px !important;
    height: 64px;
}
.parent .item_mask h2{
    line-height: 54px;
}
.parent .item_mask2 h2{
    line-height: 34px;
}
.parent .item_mask p{
    line-height: 24px; padding: 10px;
    text-align: left;
}
.parent .div8 .item_mask{
    height: 110px;
    margin-top: 360px;
}
.parent .div8 h2{
    padding: 10px;
    padding-bottom: 0;
    line-height: 34px; text-align: left;
}
.div1 {
    grid-area: 1 / 1 / 3 / 3;
    height: 230px;
    background: url("../images/yixue/1.png") left top no-repeat;
    background-size: cover;
}

.div2 {
    grid-area: 1 / 3 / 3 / 5;
    background: url("../images/yixue/2.png") left top no-repeat;
    background-size: cover;
}

.div3 {
    grid-area: 1 / 5 / 3 / 7;
    background: url("../images/yixue/3.png") left top no-repeat;
    background-size: cover;
}

.div4 {
    grid-area: 3 / 1 / 4 / 2;
    background: url("../images/yixue/9.png") left top no-repeat;
    background-size: cover;
}

.div5 {
    grid-area: 3 / 2 / 4 / 3;
    background: url("../images/yixue/10.png") left top no-repeat;
    background-size: cover;
}

.div6 {
    grid-area: 3 / 3 / 4 / 5;
    background: url("../images/yixue/11.png") left top no-repeat;
    background-size: cover;
}

.div7 {
    grid-area: 3 / 5 / 4 / 7;
    background: url("../images/yixue/12.png") left top no-repeat;
    background-size: cover;
}

.div8 {
    grid-area: 4 / 1 / 8 / 3;
    background: url("../images/yixue/5.png") left top no-repeat;
    background-size: cover;
}

.div9 {
    grid-area: 4 / 3 / 6 / 5;
    background: url("../images/yixue/4.png") left top no-repeat;
    background-size: cover;
}

.div10 {
    grid-area: 4 / 5 / 6 / 7;
    background: url("../images/yixue/13.png") left top no-repeat;
    background-size: cover;
}

.div11 {
    grid-area: 6 / 3 / 8 / 5;
    background: url("../images/yixue/7.png") left top no-repeat;
    background-size: cover;
}

.div12 {
    grid-area: 6 / 5 / 8 / 7;
    background: url("../images/yixue/8.png") left top no-repeat;
    background-size: cover;
}