如何让Grid布局中的IOTD容器在视口缩放时保持固定尺寸？

要让Grid布局中的IOTD容器在移动端保持精确固定尺寸，核心是明确指定IOTD所在列的宽度，并根据移动端视口调整布局避免挤压。以下是具体方案：

关键修改点 #

1. 为Grid容器添加grid-template-columns，直接定义IOTD列的固定/相对尺寸，替代仅靠grid-template-areas自动分配宽度的方式。
2. 在移动端媒体查询中，调整Grid布局结构，让IOTD单独占据合理空间，避免和其他元素挤兑位置。

修改后的完整代码 #

CSS代码 #

html,
body,
form,
main {
  height: 100%;
}

body {
  background-color: #232A35;
  padding: 10px;
}

.content {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mainheader {
  border: 1px red solid;
  width: 100%;
}

.iotd {
  grid-area: iotd;
  /* 适配图片的补充样式：防止溢出并保持图片比例 */
  overflow: hidden;
}
.iotd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner {
  grid-area: banner;
}

.solutions {
  grid-area: solutions;
}

.services {
  grid-area: services;
}

.tud {
  grid-area: tud;
}

.resources {
  grid-area: resources;
}

.grid-container {
  display: grid;
  /* 定义IOTD列宽为250px，剩余5列平均分配空间 */
  grid-template-columns: 250px repeat(5, 1fr);
  grid-template-areas: 
    'iotd banner banner banner banner banner' 
    'iotd solutions services resources tud tud';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  height: 100%;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media screen and (max-width: 900px) {
  .grid-container {
    /* 移动端重新布局：IOTD与Banner占一行，其余元素两两排列 */
    grid-template-columns: 250px 1fr;
    grid-template-areas: 
      'iotd banner'
      'solutions services'
      'resources tud';
  }
  .grid-container>div {
    font-size: 10px;
  }
}

HTML代码（原有结构基础上可添加图片） #

<div class="content">
  <div class="container-fluid mainheader">
    <div class="grid-container">
      <div class="iotd col">
        <img src="your-image-url.jpg" alt="每日图片">
      </div>
      <div class="banner col">Banner</div>
      <div class="solutions col">Solutions</div>
      <div class="services col">Services</div>
      <div class="tud col">The Unrecovery Difference</div>
      <div class="resources col">Resources</div>
    </div>
  </div>
</div>

方案说明 #

• 固定列宽：通过grid-template-columns: 250px repeat(5, 1fr)直接给IOTD列设置固定宽度，其余列用1fr平均分配剩余空间，确保IOTD不会被挤压。如果需要随视口比例变化，也可以用视口单位（如30vw）替代固定像素。
• 移动端布局优化：在900px以下视口重新定义Grid模板，避免所有元素挤在一行，让IOTD保持原有尺寸的同时，其他元素也能合理展示。
• 图片适配：给IOTD容器添加overflow: hidden，图片设置object-fit: cover，保证图片在容器内按比例显示，不会拉伸变形。

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