如何使用CSS Grid实现指定响应式布局？修正代码宽度问题

问题描述 #

我是CSS Grid新手，此前尝试用Flex无法实现目标布局，转而使用Grid编写了代码，但当前代码中item4与item5宽度一致，需求是item4占item5宽度的60%，同时需实现全视口响应式，第三列需匹配附图样式，请求优化代码。

原CSS代码 #

.co-sculpting-grid {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 369px) minmax(0, 465px);
  grid-template-rows: minmax(0, 264px) minmax(0, 264px);
  grid-gap: 24px;
}

.co-sculpting-grid>div {
  background-color: floralwhite;
  padding: 20px 0;
  font-size: 18px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 2;
}

.item2 {
  grid-row-start: 2;
  grid-row-end: 3;
}

.item3 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.item4 {
  grid-row-start: 1;
  grid-row-end: 2;
  max-width: 264px;
}

.item5 {
  grid-row-start: 2;
  grid-row-end: 3;
}

原HTML代码 #

<div className="co-sculpting-grid">
  <div className="item1"></div>
  <div className="item2"></div>
  <div className="item3"></div>
  <div className="item4"></div>
  <div className="item5"></div>
</div>

优化后代码 #

优化后的CSS代码 #

.co-sculpting-grid {
  display: grid;
  /* 使用fr单位实现响应式列布局，比例可按需调整 */
  grid-template-columns: 1fr 2fr 2fr;
  grid-auto-rows: minmax(264px, auto);
  gap: 24px;
  padding: 24px;
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
}

.co-sculpting-grid>div {
  background-color: floralwhite;
  padding: 20px 0;
  font-size: 18px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1 {
  grid-row: 1 / 2;
}

.item2 {
  grid-row: 2 / 3;
}

.item3 {
  /* 跨两行布局，匹配附图样式 */
  grid-row: 1 / span 2;
}

/* 第三列的子容器，用于控制item4和item5的宽度比例 */
.item-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

.item4 {
  /* 占item5宽度的60% */
  width: 60%;
  /* 可选：左对齐，若需居中可改为justify-self: center */
  justify-self: start;
}

.item5 {
  width: 100%;
}

优化后的HTML代码 #

<div class="co-sculpting-grid">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item-container">
    <div class="item4">item4</div>
    <div class="item5">item5</div>
  </div>
</div>

关键优化点 #

• 响应式适配：用fr单位替代固定像素值，列宽随视口自动调整，实现全视口响应式
• 比例控制：通过第三列的子Grid容器，精准实现item4宽度为item5的60%
• 布局匹配：保留item3跨两行的设置，与目标附图样式一致
• 代码简化：简化grid-row写法，提升可读性；添加box-sizing: border-box避免内容溢出

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