CSS网格布局中卡片超出水平线的响应式问题解决咨询

API 探路者

2026-8-26

解决移动端卡片超出蓝色水平线的问题

问题根源

卡片溢出是因为两处固定宽度限制在窄屏时超出了容器可用宽度：

.card 设置了固定的 min-width，窄屏时无法收缩到容器范围内
网格布局的 minmax(270px, 1fr) 固定了最小列宽，当容器宽度小于该值时会强制溢出

修复方案

修改以下CSS规则即可解决，无需调整fr单位：

/* 修改.card的宽度规则，移除固定min-width，确保自适应父容器 */
.card {
  /* 移除原有的min-width: 280px; */
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
  width: 100%;
  max-width: 100%; /* 新增：确保卡片不会超出父容器 */
  border: 1px solid #ccc;
  background: #FF7F50;
  font-weight: 500 !important;
  position: relative;
  color: #fff;
}

/* 修改博客容器的网格列规则，适配容器宽度 */
.container-a .blog-container {
  grid-area: blog-container;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); /* 替换270px为auto */
  grid-gap: 10px;
  box-sizing: border-box; /* 新增：确保内边距不额外增加宽度 */
}

/* 修改侧边栏组件的网格列规则，适配容器宽度 */
.blog-sidebar .widgets {
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); /* 替换270px为auto */
  grid-gap: 10px;
  padding: 5px;
  box-sizing: border-box; /* 新增：确保内边距不额外增加宽度 */
}

/* 移动端媒体查询中移除卡片的min-width设置 */
@media(max-width: 768px) {
  .container-a {
    width: calc(100% - 60px);
    margin-bottom: 100px;
  }
  .container-a span {
    font-size: 12px;
  }
  .container-a hr {
    margin-top: 3px;
  }
  .container-a .wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "blog-container" "blog-sidebar";
  }
  /* 移除原有的.card { min-width: 244px; } */
}