Flutter网格卡片自适应屏幕尺寸，填满视口需求咨询

没问题！咱们可以通过CSS Grid的特性轻松搞定这个需求，让6张卡片不管横竖屏都能自适应填满视口，再也不会出现超出的情况。下面分步骤给你拆解实现方案：

核心思路 #

要实现卡片填满视口+响应式，关键在于让网格容器占满整个视口空间，同时利用CSS Grid的弹性分配单位fr和响应式规则，让卡片自动调整尺寸和排列方式。

第一步：基础HTML结构 #

先搭好卡片容器和卡片的基础结构：

<div class="card-grid">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
  <div class="card">卡片6</div>
</div>

第二步：让容器占满视口 #

首先要确保页面根元素和网格容器都占满整个视口高度，去掉默认的边距和滚动：

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁止视口滚动，确保所有卡片都在可视范围内 */
}

.card-grid {
  display: grid;
  height: 100%;
  padding: 1rem; /* 可选：给容器加内边距，避免卡片贴紧屏幕边缘 */
  box-sizing: border-box; /* 让内边距算在容器总高度内，不超出视口 */
  gap: 1rem; /* 卡片之间的间距，按需调整 */
}

第三步：实现响应式网格（两种方案可选） #

方案一：自动适配列数（推荐）

用auto-fit结合minmax()，让浏览器自动根据屏幕宽度计算最优列数，同时保证卡片有最小尺寸，剩余空间自动拉伸填满：

.card-grid {
  /* 保留上面的基础样式 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(120px, 1fr));
}

• minmax(180px, 1fr)：表示卡片最小宽度为180px，当屏幕有多余空间时，卡片会自动拉伸占满剩余宽度
• auto-fit：自动调整列数，屏幕宽时多列，窄时少列，始终保证所有卡片在视口内

方案二：精准控制横竖屏布局

如果需要更可控的布局（比如竖屏固定2列3行，横屏固定3列2行），可以用媒体查询针对屏幕方向设置：

/* 默认竖屏状态：2列3行，卡片均分空间 */
.card-grid {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* 横屏时切换为3列2行 */
@media (orientation: landscape) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

这种方式能精准控制不同屏幕方向下的布局结构，卡片会自动用fr单位填满整个网格空间。

第四步：卡片美化（可选） #

给卡片加一些基础样式，让布局更美观：

.card {
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

效果验证 #

不管是竖屏还是横屏，6张卡片都会完整显示在视口内，并且自动调整尺寸填满整个空间。两种响应式方案都能满足需求，你可以根据自己的布局偏好选择。

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