如何使用CSS创建指定网格布局？求同类设计参考网站

先看你提供的布局图（不规则网格布局示例），这种不规则网格可以直接用CSS Grid实现，比bento box更灵活，以下是具体代码方案：

1. 代码实现 #

HTML结构 #

<div class="grid-container">
  <div class="grid-item item1">内容1</div>
  <div class="grid-item item2">内容2</div>
  <div class="grid-item item3">内容3</div>
  <div class="grid-item item4">内容4</div>
  <div class="grid-item item5">内容5</div>
  <div class="grid-item item6">内容6</div>
  <div class="grid-item item7">内容7</div>
</div>

CSS样式 #

.grid-container {
  display: grid;
  /* 定义4列，比例可按需调整 */
  grid-template-columns: 1fr 2fr 1fr 1fr;
  /* 定义3行，高度支持自适应或固定值 */
  grid-template-rows: auto auto auto;
  /* 网格间距 */
  gap: 16px;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item {
  padding: 24px;
  border-radius: 8px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 对应布局图的单元格位置设置 */
.item1 {
  /* 占第1列，跨2行 */
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item2 {
  /* 占第2列，跨2行 */
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.item3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.item4 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.item5 {
  grid-column: 3 / 5;
  grid-row: 2 / 3;
}

.item6 {
  /* 占第1-3列，跨1行 */
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

.item7 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

调整说明 #

• 可根据实际需求修改grid-template-columns的比例（比如把2fr改成固定像素值300px），或grid-template-rows的高度；
• 如需响应式适配，添加媒体查询，在小屏幕下将列数改为1列，重置所有grid-column和grid-row为默认值即可。

2. 同类布局的网站参考 #

这类不规则网格布局常被用于创意设计类场景：

• 独立设计师的个人作品集站点：用来展示不同尺寸的作品，突出重点项目；
• 潮流品牌的产品展示页：结合图片和文字模块，打造错落有致的视觉效果；
• 艺术展览官网：用来排布展览信息、作品预览，提升页面层次感。

你可以通过搜索“创意网格布局官网”“不规则作品集布局”找到更多实际案例。

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