css3 样式 九宫格

CSS3 样式的九宫格是一个常见的网页布局，它具有简单、美观、易于操作的特点，适用于各种类型的网页设计，让我们使用 CSS3 样式来创建一个简单的九宫格布局。

#container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
}
.item {
    width: 150px;
    height: 150px;
    background-color: #eee;
    text-align: center;
    line-height: 150px;
}
.item:nth-child(1) {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
.item:nth-child(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 4;
}
.item:nth-child(3) {
    grid-row: 1 / 3;
    grid-column: 4 / 5;
}
.item:nth-child(4) {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}
.item:nth-child(5) {
    grid-row: 2 / 4;
    grid-column: 2 / 4;
}
.item:nth-child(6) {
    grid-row: 3 / 4;
    grid-column: 4 / 5;
}
.item:nth-child(7) {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
}
.item:nth-child(8) {
    grid-row: 4 / 5;
    grid-column: 2 / 4;
}
.item:nth-child(9) {
    grid-row: 4 / 5;
    grid-column: 4 / 5;
}
    

以上代码是一个典型的九宫格布局，由一个包含若干个子元素的父元素和子元素样式组成。我们使用了 CSS3 的网格布局进行子元素的位置排布和定位，并对子元素进行了形状、颜色、对齐等基础属性的设置。
其中，父元素使用了display: grid; 来定义网格布局，grid-template-columns: repeat(3, 1fr); 来定义三列等分的布局，grid-gap: 10px; 来定义每一项之间的间距，justify-items: center; 和align-items: center; 来设置子元素的对齐方式。
对于子元素，设置了基础的宽高、背景色、文本居中样式等属性，还使用了grid-row和grid-column来定义每个子元素在网格中所占的行列位置。
通过以上代码，一个简单的 CSS3 样式的九宫格布局就完成了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！