css实现9宫格布局

在前端开发中，布局是非常重要的一环。而9宫格布局就是一种常用的复杂布局形式。这里我们将介绍如何使用 CSS 来实现9宫格布局。

    .container {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 10px;
    }
    .item {
        height: 100px;
        background-color: #ccc;
        border: 1px solid #333;
    }
    .item:nth-child(9) {
        grid-column: 2 / 3; 
        grid-row: 2 / 3;
    }
    .item:nth-child(1),.item:nth-child(2),.item:nth-child(4),.item:nth-child(5) {
        grid-column: 1 / 2; 
    }
    .item:nth-child(3),.item:nth-child(6),.item:nth-child(8) {
        grid-column: 2 / 3;
    }
    .item:nth-child(7) {
        grid-column: 3 / 4;
    }
    .item:nth-child(1),.item:nth-child(7) {
        grid-row: 1 / 2;
    }
    .item:nth-child(2),.item:nth-child(5),.item:nth-child(8) {
        grid-row: 2 / 3;
    }
    .item:nth-child(3),.item:nth-child(9) {
        grid-row: 3 / 4;
    }

css实现9宫格布局

上述代码使用了 CSS 网格布局来实现9宫格布局。.container 类用来设置整个布局的容器，并使用了 grid-template-columns 属性来设置 3 个相同比例的列，grid-gap 属性用于设置格子之间的间隔。

对于每个格子，我们设置了它们的高度和背景颜色，并使用了 :nth-child() 选择器来为特定的格子设置位置。其中第 9 个格子被放置在第 2 行第 2 列，而其他 8 个格子的位置根据它们的顺序分别设置了相应的行列。

通过以上的代码，我们可以轻松实现9宫格布局，并且也可以根据实际需求自定义样式来满足设计品味。

相关推荐