CSS网格布局实现两行两列服务盒子排版问题求助

要实现屏幕宽度≥768px时，前两个服务盒子占满一行、后两个盒子占满一行的布局，只需调整Grid的列模板设置，同时排查可能的冲突属性。

核心代码实现 #

HTML 结构示例

<div class="services-grid">
  <div class="service-box">服务模块1</div>
  <div class="service-box">服务模块2</div>
  <div class="service-box">服务模块3</div>
  <div class="service-box">服务模块4</div>
</div>

CSS 样式设置

/* 基础布局：小屏幕下默认堆叠 */
.services-grid {
  display: grid;
  gap: 1.5rem; /* 盒子间的间距，可按需调整 */
}

/* 大屏幕下的布局规则 */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr); /* 每行两列，每列自动均分容器宽度 */
  }
}

/* 可选：服务盒子的基础样式，确保视觉效果 */
.service-box {
  padding: 2rem;
  background-color: #f5f5f5;
  border-radius: 8px;
}

问题排查说明 #

如果之前的代码未达到预期效果，大概率是以下原因：

• 未正确设置grid-template-columns为repeat(2, 1fr)，导致列宽分配错误
• 给部分盒子添加了grid-column: 1 / -1这类强制占满整行的属性，需移除该类冲突设置
• 媒体查询的条件写错（比如用了max-width而非min-width）

按照上述代码调整后，即可实现目标效果：屏幕≥768px时，前两个盒子自动排在第一行并占满容器宽度，后两个盒子排在第二行同样占满宽度。

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