HTML div 网格 9x9 - HTML

本文将介绍如何使用HTML和CSS创建一个9x9的网格。我们将使用<div>元素和CSS网格属性来构建这个网格。

HTML

我们需要创建一个包含81个<div>元素的容器来创建这个9x9的网格。我们可以使用循环语句快速生成这些<div>元素。

<div class="grid-container">
  <!-- 生成81个div -->
  <?php
    for ($i = 0; $i < 81; $i++) {
      echo '<div class="grid-item"></div>';
    }
  ?>
</div>

CSS

现在我们需要为我们的网格添加一些CSS样式。我们可以使用grid-template-columns属性和repeat函数来创建一个拥有9列的网格。我们可以使用grid-template-rows属性和repeat函数来创建一个拥有9行的网格。

.grid-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  grid-gap: 1px;
  background-color: #ddd;
  width: 300px;
  height: 300px;
}

.grid-item {
  background-color: #fff;
  border: 1px solid #999;
}

以上的CSS代码将为容器创建一个9x9的网格，并且为每个单元格设置一个边框和纯白色背景。

效果

我们已经完成了HTML和CSS的代码。现在我们可以在浏览器中查看效果。

我们已经创建了一个漂亮的9x9网格。

结论

本文介绍了如何使用HTML和CSS快速创建一个9x9的网格。我们使用<div>元素和CSS网格属性来实现了这个网格。