如何使用HTML和CSS创建包含不同尺寸方块的网格？是否可以实现？

你需要的不规则尺寸方块网格可以根据使用场景选择对应实现方式：

1. 前端Web开发场景（推荐用CSS Grid实现） #

CSS Grid原生支持可变尺寸单元格布局，是实现这类网格的最优解：

• 先通过grid-template-columns、grid-template-rows定义最小单元的网格轨道
• 用grid-column、grid-row属性指定单个单元格跨多少个轨道，即可自定义每个方块的尺寸
• 示例代码：

<div class="grid-container">
  <div class="grid-item item-large"></div>
  <div class="grid-item"></div>
  <div class="grid-item item-wide"></div>
  <div class="grid-item"></div>
  <div class="grid-item item-tall"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  /* 定义基础网格为4列，每列宽50px，行高和列宽一致 */
  grid-template-columns: repeat(4, 50px);
  grid-auto-rows: 50px;
  gap: 2px; /* 网格间隙可按需调整 */
}
.grid-item {
  background: #f0f0f0;
  border: 1px solid #222;
}
/* 2行2列的大方块 */
.item-large {
  grid-column: span 2;
  grid-row: span 2;
}
/* 2列1行的宽方块 */
.item-wide {
  grid-column: span 2;
}
/* 1列2行的高方块 */
.item-tall {
  grid-row: span 2;
}

调整跨轨道的数值即可完全匹配你示例图中的不规则网格效果。

2. Illustrator设计场景实现 #

如果是在设计软件中制作这类网格：

• 先绘制最小尺寸的基础网格，执行顶部菜单对象 > 路径 > 分割为网格，设置基础行列数、间距参数生成统一的小方格
• 选中需要合并为大尺寸方块的相邻小方格，打开路径查找器面板点击「联集」，即可合并为一个完整的大方块，全程不会破坏网格的对齐关系。

3. Python数据可视化场景实现 #

如果是用Python生成这类可视化网格，可以用Matplotlib的gridspec模块实现：

import matplotlib.pyplot as plt
from matplotlib.gridspec import GridSpec

fig = plt.figure(figsize=(5, 5))
# 定义4x4的基础网格
gs = GridSpec(4, 4, figure=fig, wspace=0.05, hspace=0.05)
# 2x2大小的方块
ax1 = fig.add_subplot(gs[0:2, 0:2])
ax1.set_facecolor("#e0e0e0")
# 1x1大小的方块
ax2 = fig.add_subplot(gs[0, 2])
ax2.set_facecolor("#e0e0e0")
ax3 = fig.add_subplot(gs[0, 3])
ax3.set_facecolor("#e0e0e0")
# 按相同规则定义其他尺寸的方块即可
plt.xticks([])
plt.yticks([])
plt.show()

内容的提问来源于stack exchange，提问作者Peter