如何用Grid或Flex实现不同高度的交替图片阵列布局？

问题分析 #

你当前的Grid实现因为给不同图片设置了不同的grid-row跨度，导致Grid自动填充空白单元格时打乱了图片从左到右的排列顺序。下面提供两种解决方案：Flex布局（更易实现顺序排列）和修正后的Grid布局。

方案一：Flex布局实现 #

Flex布局更容易保证图片按从左到右的顺序排列，同时实现高度交替效果：

import styled from "styled-components";
import React from "react";

const App = () => {
const imageList = [
{
  id: "1",
  url: "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
  id: "2",
  url: "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
  id: "3",
  url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
},
{
  id: "4",
  url: "https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
},
{
  id: "5",
  url: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
  id: "6",
  url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
},
{
  id: "7",
  url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
},
{
  id: "8",
  url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
},
];

return (
<Wrapper>
  {imageList.map((image, index) => (
    index % 2 === 0 ? (
      <ImageWrapper key={image.id}>
        <ImageStyled src={image.url} alt={`image-${image.id}`} />
        <H4Styled>{image.id}</H4Styled>
      </ImageWrapper>
    ) : (
      <ImageWrapper1 key={image.id}>
        <ImageStyled src={image.url} alt={`image-${image.id}`} />
        <H4Styled>{image.id}</H4Styled>
      </ImageWrapper1>
    )
  ))}
</Wrapper>
);
};

export default App;

const Wrapper = styled.div`
display: flex;
flex-wrap: wrap;
gap: 30px;
padding: 20px;
`;

const ImageWrapper = styled.div`
overflow: hidden;
position: relative;
width: calc(33.333% - 20px);
height: 160px;
`;

const ImageWrapper1 = styled.div`
overflow: hidden;
position: relative;
width: calc(33.333% - 20px);
height: 240px;
`;

const ImageStyled = styled.img`
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
`;

const H4Styled = styled.h4`
position: absolute;
top: 16px;
left: 16px;
color: white;
margin: 0;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
`;

关键调整：

• Wrapper使用flex-wrap: wrap实现自动换行，gap控制图片间距
• 图片容器宽度设为calc(33.333% - 20px)，保证3列布局并抵消gap的影响
• 用object-fit: cover保证图片比例不被拉伸变形
• 优化标题样式，增加阴影和左定位，提高文字可读性

方案二：修正后的Grid布局 #

如果坚持使用Grid，通过添加grid-auto-flow: dense填充空白单元格，并明确列跨度规则，可实现顺序排列的交替高度布局：

// 仅修改样式部分，组件逻辑保持不变
const Wrapper = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 80px;
gap: 30px;
grid-auto-flow: dense;
padding: 20px;
`;

const ImageWrapper = styled.div`
overflow: hidden;
position: relative;
grid-row: span 2;
grid-column: span 1;
`;

const ImageWrapper1 = styled.div`
overflow: hidden;
position: relative;
grid-row: span 3;
grid-column: span 1;
`;

// ImageStyled和H4Styled同Flex方案

关键调整：

• 添加grid-auto-flow: dense让Grid自动填充空白区域，避免布局错位
• 明确grid-column: span 1保证每个图片固定占1列

安装依赖 #

如果还未安装styled-components，执行以下命令：

npm install --save styled-components

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