如何让Admin Dashboard中Announcement、Trending与Projects网格对齐？

核心问题分析 #

你的右侧Announcement和Trending区域未与Projects顶部对齐，且无法平分Projects的整体高度，原因是网格行的高度配置未设置为等高，同时Projects区域未跨占右侧两个区域的总行数。

具体调整步骤 #

1. 修改主容器的网格行配置
   找到main元素的CSS，将grid-template-rows改为1fr 1fr，让右侧两行自动平分可用高度：

   main {
     display: grid;
     grid-template-columns: 3fr 1fr;
     grid-template-rows: 1fr 1fr; /* 关键：两行等高分配 */
     gap: 2rem;
     padding: 2rem;
   }
   

2. 让Projects区域跨占两行
   给.projects添加网格行跨域设置，使其高度等于右侧两个区域的高度之和，同时保证顶部对齐：

   .projects {
     grid-row: 1 / -1; /* 从第一行延伸到最后一行 */
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
   }
   

3. 统一区域边距（可选）
   如果Announcement或Trending区域存在默认顶部边距，可能导致顶部错位，可清除或统一边距：

   .announcements, .trending {
     margin-top: 0;
   }
   

效果验证 #

调整后，Projects区域会从顶部延伸至底部，右侧Announcement和Trending各占一半高度，三者顶部完全对齐，符合预期布局效果。

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