基于HTML和CSS的Masonry瀑布流卡片文本定位问题

要让绿色卡片的标题与文本位置和其他卡片保持一致，且不破坏响应式布局，只需调整卡片内部的对齐方式，移除冲突的布局属性即可：

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-self: center;
  min-height: 100vh;
}

.container {
  position: relative;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: minmax(100px, auto);
  margin: 40px;
  grid-auto-flow: dense;
  grid-gap: 35px;
}

.container .box {
  background: #333;
  padding: 90px;
  text-align: left;
  color: #000;
  transition: 0.5s;
  border-radius: 10px;
  background: radial-gradient(#f9d423, #f83600);
  font-family: "bergen mono";
  font-size: 2.1vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 让内容从顶部开始排列 */
  align-items: flex-start; /* 内容左对齐，匹配文本对齐方式 */
}

h6 {
  color: #000;
  font-weight: 200;
  font-size: 30px;
  letter-spacing: 1px;
  font-family: "bergen mono";
}

.container .box:hover {
  transition: all 0.3s ease;
  transform: scale(1.05, 1.05);
}

.container .box img {
  position: relative;
  max-width: 100px;
  margin-bottom: 10px;
}

.container .box:nth-child(1) {
  grid-column: span 2;
  grid-row: span 1;
  background: radial-gradient(#2bffc3, #72afd3);
  /* 移除自定义的padding-top，保持和其他卡片一致的内边距 */
}

.container .box:nth-child(2) {
  grid-column: span 1;
  grid-row: span 2;
  background: radial-gradient(#c4ff29, #89d294);
}

.container .box:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
  background: radial-gradient(#c4ff29, #89d294);
}

.container .box:nth-child(5) {
  grid-column: span 3;
  grid-row: span 1;
  background: radial-gradient(#2bffc3, #72afd3);
}

@media (max-width: 960px) {
  .container {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    grid-template-rows: minmax(auto, auto);
  }
  .container .box {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    grid-template-rows: minmax(auto, auto);
  }
  .container .box {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}

关键调整说明 #

1. 移除冲突的布局属性：删除了.box中重复的display: grid; place-items: center;，保留flex布局，避免属性冲突导致的布局混乱。
2. 统一内容对齐方式：添加justify-content: flex-start和align-items: flex-start，让所有卡片的内容从左上角开始排列，无论卡片高度（单行/跨两行），标题和文本的相对位置完全一致。
3. 统一内边距：移除第一个卡片自定义的padding-top: 3vh，确保所有卡片的内边距统一，避免内容位置偏移。

这样调整后，绿色卡片的文本位置会和其他卡片完全匹配，同时响应式布局不受影响，在不同设备上都能正常显示。

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