如何在窗口调整大小时让内容自适应？菜单布局错位问题求助

修复后可直接使用的CSS代码 #

#menu {
  margin-top: 60px;
}

.menu-heading {
  /* 改用响应式字号避免溢出容器 */
  font-size: clamp(2rem, 8vw, 5rem);
  text-align: center;
  text-transform: uppercase;
  color: black;
  font-weight: 900;
}

.menu-grid {
  display: grid; /* 补充grid布局生效必需属性 */
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; /* 替代子元素margin避免宽度溢出挤压 */
}

.menu-img {
  width: 100%;
  aspect-ratio: 4/3; /* 固定宽高比确保图片完整显示 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(https://i2.wp.com/www.littlefiggy.com/wp-content/uploads/2014/04/Swiss-Burger.jpg?resize=800%2C533);
}

.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: white;
  overflow: hidden; /* 避免图片覆盖容器圆角 */
}

.menu-container:hover {
  box-shadow: 0 0 3rem black;
  transform: scale(1.07);
}

.menu-container>.menu-p {
  background-color: white;
  padding: 15px 0;
  width: 100%;
  font-weight: 500;
}

.menu-container>.menu-heading {
  margin-top: 15px;
}

.menu-container>ol {
  margin: 15px;
}

@media (max-width: 800px) {
  .menu-grid {
    /* 小屏幕下自动切换为单列布局 */
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 0 auto 100px;
  }
}

.menu-p {
  font-size: 1.4rem;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-title {
  font-size: 1.5rem;
  text-align: center;
  margin-top: 1rem;
  padding: 0 10px; /* 避免长标题溢出容器 */
}

.price {
  font-size: 3rem;
  margin-top: 1rem;
  text-align: center;
  color: #FF4500;
}

修改说明 #

• 补充了.menu-grid的display: grid属性，原代码只写了grid行列配置没有声明grid布局，导致布局规则完全不生效
• 用aspect-ratio固定图片比例，替代原无效的百分比高度设置，确保图片始终完整显示
• 菜单大标题改用响应式字号，小屏幕自动缩小不会跑出容器范围
• 移除了.menu-container的固定宽度设置，交由grid自动分配列宽，避免margin撑宽元素导致菜单项被挤成单列
• 调整小屏幕布局逻辑，直接修改grid列数为1，解决原flex布局逻辑混乱的问题
• 给菜单项标题加了内边距，避免长文字溢出容器

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