能否通过Media Query修改Grid布局实现横竖排列切换？

完全可以实现，核心思路是通过**CSS媒体查询（Media Query）**在指定屏幕宽度下修改Grid的列布局规则，从而切换横向/纵向排列。以下是具体实现代码：

基础HTML结构 #

<div class="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <div class="grid-item">项目4</div>
</div>

响应式CSS代码 #

/* 默认横向布局：设置多列，元素横向排列 */
.grid-container {
  display: grid;
  /* 示例：均分3列，可根据需求调整列数 */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; /* 元素间距 */
  padding: 16px;
}

.grid-item {
  padding: 20px;
  background: #f1f1f1;
  border-radius: 4px;
}

/* 媒体查询：屏幕宽度≤768px时切换为纵向布局 */
@media (max-width: 768px) {
  .grid-container {
    /* 改为单列，元素自动纵向堆叠 */
    grid-template-columns: 1fr;
  }
}

关键说明 #

• 默认状态通过grid-template-columns定义多列（比如repeat(3,1fr)实现3列均分），让元素横向排列；
• 媒体查询触发时，将列数改为1fr（单列），元素就会自动从上到下纵向排列；
• 如果需要自适应列数（屏幕足够宽时自动增加列数），可以把默认的grid-template-columns改成repeat(auto-fit, minmax(220px, 1fr))，这样会根据屏幕宽度自动调整列数，小于最小宽度时自动切换为单列。

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