咨询响应式CSS盒子制作方案：两行每行两盒占满页面容器宽度

嘿，好久没碰这类布局也完全正常！下面我给你分享两种最常用且靠谱的实现方案，都是现在前端主流的做法，适配性拉满：

方案一：CSS Grid（最直观的行列布局） #

Grid天生就是为这种规整的行列布局设计的，代码简洁又好维护。

HTML结构 #

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
</div>

CSS代码 #

* {
  /* 全局盒模型重置，避免padding/border撑宽元素 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%; /* 占满父容器宽度 */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 每行2个等宽列 */
  grid-auto-rows: auto; /* 行高自适应内容，也可以设固定值比如200px */
  gap: 1rem; /* 盒子之间的间距，可根据需求调整 */
  padding: 1rem; /* 可选：给容器加内边距，避免盒子贴边 */
}

.box {
  padding: 2rem;
  background-color: #f0f0f0;
  border-radius: 8px;
  /* 可选：让盒子内的内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式适配：小屏幕下变成单列 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

方案二：CSS Flexbox（灵活度更高的布局） #

如果你更习惯用Flexbox，也能轻松实现这个效果，适合需要更灵活调整的场景。

HTML结构（和Grid方案一致） #

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
</div>

CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* 允许盒子换行 */
  gap: 1rem;
  padding: 1rem;
}

.box {
  flex: 1 1 calc(50% - 0.5rem); /* 每个盒子占50%宽度，减去gap的一半（避免间距撑破布局） */
  padding: 2rem;
  background-color: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式适配：小屏幕下占满宽度 */
@media (max-width: 768px) {
  .box {
    flex: 1 1 100%;
  }
}

关键注意点 #

• 一定要加box-sizing: border-box，否则盒子的padding和border会额外增加宽度，导致布局错位。
• gap属性用来设置盒子之间的间距，比用margin更省心，不会出现外边距折叠的问题。
• 响应式媒体查询可以根据你的需求调整断点（比如768px），确保在手机等小屏幕上布局依然美观。

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