九宫格

1、flex布局

技术点：flex布局、box-sizing、css选择器、z-index、页边距

html代码

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

css代码

.grid{
    display: flex;
    flex-wrap: wrap;
    width: 300px;
}
.grid > div{
    width: 100px;
    height: 100px;
    border: 4px solid #ccc;
    box-sizing: border-box;
    margin-left: -4px;
    margin-top: -4px;
}
/* 1、4、7 */
.grid > div:nth-child(3n+1) {
    margin-left: 0;
}
.grid > div:hover{
    border-color: red;
    z-index: 2;
}

2、grid布局

Grid非常强大,可以实现各种各样的三维布局

html代码：

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

css代码：

.grid {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此为重复的合并写法*/
    grid-template-rows: repeat(3, 1fr);  /*等同于1fr 1fr 1fr,此为重复的合并写法*/
}
.grid > div {
    border: 4px solid #000;
    margin-left: -4px;
    margin-top: -4px;
}
.grid > div:hover{
    border-color: red;
    z-index: 2;
}