Material UI：如何对齐行内每张卡片的标题、图片与描述？

要让每行卡片的标题、图片、描述精准对齐，核心是通过CSS统一卡片内部的布局规则，确保同一行的卡片对应元素拥有一致的空间分配，具体调整方案如下：

• 统一卡片容器的垂直布局
  给每个卡片容器设置弹性布局并占满可用高度，让内部元素按垂直方向排列，且每个卡片的高度一致：

  .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  

• 固定标题区域的空间占比
  给标题容器设置flex-shrink: 0，避免因标题长度不同导致高度变化，保证下方元素的起始位置一致：

  .card-title {
    flex-shrink: 0;
    margin: 0 0 1rem;
    font-size: 1.2rem;
  }
  

• 统一图片显示尺寸
  给图片设置固定高度和自适应宽度，配合object-fit确保图片按比例展示，避免不同图片尺寸打乱布局：

  .card-image {
    width: 100%;
    height: 180px;
    object-fit: contain; /* 若需要裁剪填充可改用cover */
    margin-bottom: 1rem;
  }
  

• 让描述区域自动填充剩余空间
  给描述容器设置flex: 1，使其占据卡片剩余的垂直空间，即使描述长度不同，也不会挤压其他元素，同时保证底部元素对齐：

  .card-description {
    flex: 1;
    margin-bottom: 1rem;
    line-height: 1.5;
  }
  

• 外层列表用Grid布局保证列对齐
  外层卡片列表改用CSS Grid布局，自动适配屏幕尺寸生成等宽列，比Flex布局更易保证列内元素对齐：

  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
  }
  

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