如何仅使用HTML和CSS创建该网格布局？

要实现图中的网格布局，用CSS Grid是最直接的方案，完全不需要JS，纯HTML+CSS就能搞定。以下是具体实现代码和说明：

第一步：HTML结构 #

先搭建基础的网格容器和子元素：

<div class="grid-container">
  <div class="grid-item big-block">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

第二步：CSS样式 #

通过Grid属性定义布局规则：

/* 网格容器核心设置 */
.grid-container {
  display: grid;
  /* 定义2列，可根据需求调整比例，比如2fr 1fr让左列更宽 */
  grid-template-columns: repeat(2, 1fr);
  /* 设置每行默认高度，也可以用auto自适应内容 */
  grid-auto-rows: 140px;
  /* 网格项之间的间距 */
  gap: 10px;
  /* 容器内边距，可按需调整 */
  padding: 10px;
  /* 限制容器宽度，居中显示 */
  max-width: 700px;
  margin: 0 auto;
}

/* 通用网格项样式 */
.grid-item {
  background-color: #e2e2e2;
  border: 1px solid #ccc;
  /* 让内容居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* 让左侧大区块占据2行 */
.grid-item.big-block {
  grid-row: span 2;
}

自定义调整说明 #

• 如果想让左侧大区块更宽，把grid-template-columns改成2fr 1fr即可，fr是网格的剩余空间分配单位，2fr表示占比是1fr的两倍。
• 修改grid-auto-rows的值可以调整每行的高度，换成auto则会根据内容自动适配高度。
• 调整gap和padding的值可以改变网格间距和容器内边距，匹配图中的视觉效果。
• 背景色、边框样式可以根据需求自行修改，和原图保持一致。

内容的提问来源于stack exchange，提问作者John S.