求助：如何在移动端保持CSS Grid的5列布局与桌面端一致？

嘿，作为CSS Grid新手，这个需求其实超容易实现的！我来一步步教你怎么让桌面和移动端都保持一行5列的布局～

核心思路 #

CSS Grid默认不会自动换行，只要你不给移动端单独修改列数，它就会一直保持你设置的列数。所以关键就是固定列数设置，同时避免媒体查询覆盖这个设置。

基础实现代码 #

首先给你的Grid容器设置核心样式：

.grid-container {
  display: grid;
  /* 固定创建5个等宽列，1fr表示每列平分容器宽度 */
  grid-template-columns: repeat(5, 1fr);
  /* 可选：列之间添加间距，让布局更美观 */
  gap: 1rem;
}

这样设置后，不管屏幕多大，容器都会保持一行5列——在桌面端会铺满宽度，在移动端每列会自动缩小来适应屏幕。

优化：避免列过窄 #

如果担心移动端列宽太窄导致内容挤压，可以用minmax()来设置列的最小宽度：

.grid-container {
  display: grid;
  /* 每列最小宽度120px，剩余空间平分 */
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 1rem;
  /* 可选：当屏幕宽度小于5*120px时，显示横向滚动条 */
  overflow-x: auto;
}

添加overflow-x: auto后，小屏幕上用户可以横向滚动查看所有列，保证每列不会被挤得变形。

关键注意点 #

如果你之前写过针对移动端的媒体查询，一定要删掉那些修改grid-template-columns的代码！比如下面这段会让移动端变成1列，必须移除：

/* 要删掉这段！ */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

完整示例 #

这里给你一个包含CSS变量的完整代码参考：

/* 你的CSS变量 */
:root {
  --primary: #ddd;
  --dark: #333;
  --light: #fff;
  --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 1rem;
  padding: 1rem;
  overflow-x: auto;
}

.grid-item {
  background: var(--primary);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  color: var(--dark);
}

对应的HTML结构：

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>

这样设置后，你的网站在桌面和移动端就会保持完全一致的5列布局啦～

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