利用弹性布局做九宫格

利用弹性布局（如Flexbox或Grid）创建九宫格布局是一种常见的响应式设计技术。这里以Flexbox为例说明：

首先，在HTML中设置容器（比如一个`<div>`）作为九宫格的主容器，并给它一个flex属性值，通常设置为row wrap，使得元素可以在一行不够的情况下换到下一行。

<div class="container" style="display:flex; flex-wrap:wrap;">
</div>

然后，为每个单元格添加一个类名，例如`.grid-item`，并设置它们的宽度。为了保持灵活性，可以使用百分比或者弹性单位（如`flex-basis`）：

.grid-item {
  flex: 1 0 calc(33.33% - margin); /* 33.33% for a square grid, adjust margin as needed */
  box-sizing:border-box;
  margin: 5px; /* Optional: add some spacing between items */
}

在这个例子中，`.grid-item`会占据总宽度的三分之一（33.33%），并留出边距。如果你想要创建的是正方形的九宫格，而不是等宽的格子，可以根据需要调整计算公式。

最后，你可以通过改变窗口大小来查看布局如何适应变化。当屏幕变小时，如果内容超过一行，九宫格中的项目就会自动堆叠在一起，形成适合屏幕的列数。