[分享]css做出九宫格

CSS是一种用来美化HTML页面的样式表语言，通过它可以使网站页面更加美观，同时也可以提高网站的用户体验和互动性。在制作网站页面的时候，经常会用到九宫格布局，这种布局方式可以让网站页面呈现出整齐、美观...

CSS是一种用来美化HTML页面的样式表语言，通过它可以使网站页面更加美观，同时也可以提高网站的用户体验和互动性。

在制作网站页面的时候，经常会用到九宫格布局，这种布局方式可以让网站页面呈现出整齐、美观的效果，同时也可以让网页内容更加清晰明了。

/* CSS代码 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 20px;
} 

代码解析：

首先我们创建一个class名为grid的div元素，它的display属性值为grid，表示该元素会作为一个网格容器来显示。接着我们使用grid-template-columns属性来定义该容器的列，其中repeat()函数表示重复某种规则，这里我们定义了3列，每一列的宽度为1fr（即平均分配）。最后，我们定义了grid-gap属性，用来给每一个网格之间添加20px的空隙。

接下来我们创建一个class名为item的div元素，其background属性用来设置背景色，border属性用来设置边框，padding属性用来设置内边距。

最后，我们将item元素添加到grid元素中即可。这样，九宫格布局就完成了。