CSS如何实现4个盒子2行排列、首行两盒间放链接并对齐绿蓝盒子

现有代码存在的问题 #

• grid布局下未给链接容器#link设置order属性，所有grid直接子元素默认order为0，排序逻辑混乱，不符合预期的布局结构
• grid容器默认交叉轴对齐规则为stretch，单元格内元素会被拉伸至行高一致，不同高度的盒子无法顶部对齐
• <p>标签自带默认上下外边距，会撑高链接所在单元格的高度，进一步破坏第一行元素的对齐效果
• 现有盒子的order属性设置错误，无法实现「第一行左右盒子+中间链接，第二行剩余两个盒子」的布局顺序

调整后的完整CSS代码 #

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: grid;
  grid-gap: 20px; /* 可根据视觉需求调整间距，原100px过大 */
  grid-template-columns: 200px 200px 200px;
  align-items: start; /* 新增：所有grid子元素顶部对齐，不拉伸 */
}

a {
  padding: 5px;
  background-color: blue;
  text-decoration-line: none;
  color: white;
}

#link {
  order: 2; /* 新增：设置链接排在第一行中间位置 */
  margin: 0; /* 新增：去掉p标签默认外边距 */
  align-self: center; /* 新增：链接在单元格内垂直居中 */
  text-align: center; /* 新增：链接在单元格内水平居中 */
}

#one {
  border-style: solid;
  order: 3; /* 修改：排在第一行最右侧 */
  border-width: 5px;
  border-color: blue;
  box-sizing: border-box;
  width: 200px;
  height: 130px;
  margin: 5px;
  padding: 5px;
}

#two {
  border-style: solid;
  order: 1; /* 修改：排在第一行最左侧 */
  border-width: 5px;
  border-color: green;
  box-sizing: border-box;
  width: 200px;
  height: 110px;
  margin: 5px;
  padding: 5px;
}

#three {
  border-style: solid;
  order: 4; /* 修改：排在第二行第一个 */
  border-color: orange;
  border-width: 5px;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  margin: 5px;
  padding: 5px;
}

#four {
  border-style: solid;
  order: 5; /* 修改：排在第二行第二个 */
  border-color: yellow;
  border-width: 5px;
  box-sizing: border-box;
  width: 200px;
  height: 110px;
  margin: 5px;
  padding: 5px;
}

核心修改说明 #

1. 给grid容器新增align-items: start，保证所有盒子顶部对齐，不会因为单元格高度被拉伸变形
2. 调整所有元素的order属性，保证排序符合「第一行：绿盒子-链接-蓝盒子，第二行：橙盒子-黄盒子」的预期结构
3. 给链接的父容器p#link去掉默认外边距，同时设置align-self: center和text-align: center，让链接在中间单元格内水平垂直都居中，和左右两侧的盒子视觉上对齐
4. 可以根据实际需求调整grid-gap的数值，控制元素之间的间距

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