如何在HTML/CSS中实现移动端/平板端方形盒子整齐排列？

我已经复现了下图的效果，桌面端显示完全没问题：

用来在桌面端对齐方形盒子的CSS代码是这样的：

.squares .square { 
  width: 13%; 
  text-align: center; 
  height: 150px; 
  padding-top: 1%; 
  padding-left: 1%; 
  padding-right: 1%; 
  border-style: solid; 
  border-width: 3px; 
  border-color: rgb(145, 147, 150); 
  border-radius: 10px; 
}

但换到移动端查看时，布局就彻底乱了：

问题说明 #

我想知道得怎么修改代码，才能在移动端实现这样的布局：一行显示3个方形盒子，剩下的2个在下方居中排列（或者分两行各显示2个也可以接受）。我自己试了下面这段媒体查询，但没达到预期效果：

@media only screen and (max-width: 767px) { 
  .squares .square { 
    width: 41%; 
    text-align: center; 
    height: 150px; 
    margin-bottom: 11%; 
    padding-top: 1%; 
    padding-left: 1%; 
    padding-right: 1%; 
    border-style: solid; 
    border-width: 3px; 
    border-color: rgb(145,147,150); 
    border-radius: 10px; 
  } 
}

解决方案 #

问题大概率出在你原来的布局方式（比如用了float或inline-block却没处理间距冲突），推荐用Flexbox或CSS Grid来实现响应式布局，这两种方式比手动调宽度更可靠：

方案1：用Flexbox实现

先给父容器.squares加上Flex属性，再在媒体查询里调整每行数量和对齐逻辑：

/* 基础样式：保留桌面端设置，同时给父容器加Flex优化 */
.squares {
  display: flex;
  flex-wrap: wrap;
  gap: 1%; /* 用gap控制盒子间距，比margin更省心，不会出现最后一行多余间距 */
  justify-content: center; /* 桌面端也可以居中，视觉效果更协调 */
}

.squares .square { 
  width: 13%; 
  text-align: center; 
  height: 150px; 
  padding: 1%; 
  border: 3px solid rgb(145, 147, 150); 
  border-radius: 10px; 
  box-sizing: border-box; /* 关键！让padding和border不额外占用宽度，避免布局撑破容器 */
}

/* 移动端媒体查询 */
@media only screen and (max-width: 767px) {
  .squares .square {
    width: 31%; /* 3个盒子 + 2个1%的gap，刚好占满大部分宽度，剩余空间自动居中 */
    margin-bottom: 2%; /* 调整上下盒子的间距 */
  }

  /* 如果想要最后两个盒子单独居中（两行各2个的效果），可以替换上面的width设置 */
  /* .squares .square {
    width: 48%;
  } */
}

方案2：用CSS Grid实现

Grid更适合这种行列明确的布局，代码更简洁直观：

.squares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13%, 1fr)); /* 桌面端自动适配，每个盒子最小宽度13% */
  gap: 1%;
  justify-items: center;
}

.squares .square { 
  height: 150px; 
  padding: 1%; 
  border: 3px solid rgb(145, 147, 150); 
  border-radius: 10px; 
  box-sizing: border-box;
  text-align: center;
  width: 100%; /* 让盒子占满Grid单元格 */
}

@media only screen and (max-width: 767px) {
  /* 移动端一行3个盒子 */
  .squares {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 如果想要两行各2个的效果，替换上面的grid-template-columns */
  /* .squares {
    grid-template-columns: repeat(2, 1fr);
  } */
}

关键注意点 #

1. 务必添加box-sizing: border-box;，否则padding和border会额外增加盒子宽度，导致布局超出容器。
2. 用gap代替margin控制间距，能避免最后一行出现多余的外侧间距问题。
3. Flexbox和Grid都是现代浏览器广泛支持的布局方式，不用担心兼容性问题。

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