如何实现卡片横向排列的响应式grid view布局

响应式横向排列网格布局实现方案 #

使用CSS Grid即可实现需求效果，无需依赖column-count属性，卡片默认按横向顺序排列，同时支持响应式适配不同屏幕宽度。

代码示例 #

HTML 结构

<div class="grid-wrapper">
  <div class="card">卡片1内容</div>
  <div class="card">卡片2内容</div>
  <div class="card">卡片3内容</div>
  <div class="card">卡片4内容</div>
  <!-- 追加更多卡片即可 -->
</div>

CSS 样式

.grid-wrapper {
  display: grid;
  /* 自动适配列数：单卡最小宽度280px，可根据业务需求调整 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* 卡片横向、纵向间距 */
  gap: 16px;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.card {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 16px;
  min-height: 220px;
}

参数调整说明 #

• 修改minmax的第一个参数即可调整卡片的最小显示宽度，适配不同的设计尺寸要求
• 修改gap参数可以调整卡片之间的间距
• 如果卡片高度不一致，需要自动填充网格空白位置，可在.grid-wrapper中添加grid-auto-flow: dense属性
• 如需固定列数，将auto-fit替换为对应的数字即可，比如repeat(3, 1fr)就是固定3列布局

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