[分享]css做九宫格

CSS做九宫格是网站开发中常用的技巧之一。下面将介绍如何使用CSS来实现九宫格的效果。

.grid{
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.grid-item{
  width: 30%;
  height: 200px;
  margin: 1.5%;
  background-color: #ccc;
  border: 1px solid #000;
} 

首先，在HTML中创建一个容器元素，命名为“grid”。接下来，使用CSS的flex布局，将子元素按照一定的规则自动排列成九宫格的形式。在此例子中，我们设置每个子元素的宽度为30%，再加上1.5%的margin值，使得它们能够自动排列所形成的九宫格更加美观。每个子元素的高度都设置为200px，并且都有一个灰色背景与黑色边框来突出展示。

如果需要加入更多的样式来美化我们的九宫格，只需要在CSS文件中加入相应的样式即可。例如，可以为每个子元素增加hover动画效果，或者调整子元素的背景色和边框宽度等。