分别实现1-16宫格的布局

在前端开发中，实现1-16宫格的布局可以使用HTML、CSS和JavaScript。以下是一个简单的示例，展示了如何使用Flexbox或Grid布局来实现1-16宫格。

使用Flexbox布局

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <!-- ... 添加更多div到16 -->
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}

.flex-item {
  flex: 1 0 calc(25% - 20px); /* 4 items per row, adjust the margin as needed */
  margin: 10px;
  height: 100px; /* Adjust as needed */
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

使用Grid布局

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <!-- ... 添加更多div到16 -->
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns of equal width */
  grid-gap: 20px; /* Adjust the gap as needed */
}

.grid-item {
  height: 100px; /* Adjust as needed */
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

在两种布局中，你都可以根据需要调整格子的大小、间距和样式。这些示例代码提供了基本的16宫格布局，你可以根据自己的设计需求进行进一步的定制。