如何将4张卡片排列为菱形布局？已尝试Flexbox和Grid未成功

针对四张卡片的菱形布局需求，分两种常见场景给出具体实现方案：

场景1：卡片位置组成菱形（整体布局为菱形） #

如果是要让四张卡片的摆放位置形成菱形（上下各一张、左右各一张的对称结构），用CSS Grid可以快速实现：

基础HTML结构（适配你的卡片结构） #

<div class="card-container">
  <div class="card">卡片内容1</div>
  <div class="card">卡片内容2</div>
  <div class="card">卡片内容3</div>
  <div class="card">卡片内容4</div>
</div>

CSS实现代码 #

.card-container {
  display: grid;
  /* 3列布局，中间列承载上下两张卡片 */
  grid-template-columns: repeat(3, 1fr);
  /* 卡片间的间距，按需调整 */
  gap: 1.5rem;
  /* 容器自适应宽度并居中 */
  width: fit-content;
  margin: 0 auto;
}

.card {
  /* 基础卡片样式，替换成你自己的样式即可 */
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 定位四张卡片到菱形对应位置 */
.card:nth-child(1) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.card:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.card:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.card:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

场景2：单张卡片为菱形形状 #

如果是要让每张卡片本身呈现菱形外观，同时保持布局排列，可结合transform: rotate()实现：

CSS调整代码 #

.card-container {
  /* 用Flex横向排列，也可替换为Grid布局 */
  display: flex;
  gap: 2.5rem; /* 旋转后卡片实际占用空间变大，需调大间距 */
  align-items: center;
  justify-content: center;
}

.card {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  /* 旋转卡片形成菱形 */
  transform: rotate(45deg);
  /* 让卡片内内容不跟着旋转，反向还原 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card > * {
  transform: rotate(-45deg);
  width: 100%;
  text-align: center;
}

常见问题排查 #

你之前尝试Flex和Grid未成功，大概率是以下原因：

• 使用Flex时，忽略了菱形布局需要的二维错位特性，Flex是线性布局，仅适合一维排列，复杂错位需结合Grid或定位实现
• 使用Grid时，模板行列的设置不符合菱形布局的需求，比如未设置足够的行列数来支撑错位摆放
• 若尝试旋转卡片，未对内部内容做反向旋转处理，导致内容跟着倾斜变形

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