CSS 动态网格图案

Question

我目前正在使用 React、SCSS 和 styled-components图书馆：

我最终将从数据库中获取文章，因此必须动态生成每张卡片。我正在努力使长白卡（在屏幕截图中标记为 (5) 和 (10)）动态调整大小。

我的主要问题是第 5 张卡片需要 网格行：1 / 跨度 2，但第 10 张卡片需要 网格行： 3 / span 2 （第 15 个需要 grid-row: 5 / span 2 等等），但我不能像那样硬编码.

如何自动增加每 5 张卡片的网格行开始？

这是我的 React 组件：

    ...

    return (
                <Grid>
                    <Card>
                        <FlexBox>
                            <div>
                                <Image src="profilePicture.jpg" alt="Image"/>
                            </div>
                            <div>
                                <Name>Jonathan Walters</Name>
                                <Info>Member</Info>
                            </div>
                        </FlexBox>
                        <Title> (1) Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Title>
                        <Content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus ...</Content>
                    </Card>
                    
                    <Card> ... </Card>
                    <Card> ... </Card>
                    <Card> ... </Card>
                    <Card> ... </Card>
                    <Card> ... </Card>
                    <Card> ... </Card>
                    <Card> ... </Card>
                    <Card> ... </Card>
                    <Card> ... </Card>
                </Grid>
        )
    }

（我最终将使用 map 方法迭代数组，return 数组中的每个元素对应一个卡片组件）。

这是我的 styled.jsx 文件：

    const colors = {
        grey: 'rgb(72, 85, 106)',
        purple: 'rgb(117, 65, 200)',
        coal: 'rgb(25, 33, 46)',
    }

    export const Grid = styled.div`
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(4, 1fr);
    `

    export const Card = styled.div`
        &:nth-child(5n) {
            grid-column-start: 4;
            grid-row: 1 / span 2;
        }
        &:nth-child(5n+1) {
            background-color: ${colors.purple};
            color: white;
            grid-column: span 2;
        }
        &:nth-child(5n+2) {
            background-color: ${colors.grey};
            color: white;
        }
        &:nth-child(5n+3) {
            background-color: white;
            color: black;
        }
        &:nth-child(5n+4) {
            background-color: ${colors.coal};
            color: white;
            grid-column: span 2;
        }
        &:nth-child(5n+5) {
            background-color: white;
            color: black;
        }
        &:nth-child(10n) {
            grid-column-start: 4;
            grid-row: 3 / span 2;
        }
    `

    export const FlexBox = styled.div`
        display: flex;
        gap: 1rem;
        `

    export const Image = styled.img`
        border-radius: 50%;
        width: 1.75rem;
    `

    export const Name = styled.h2`
        font-size: 1rem;
    `

    export const Info = styled.p`
        font-size: 0.8rem;
    `

    export const Title = styled.p`
        font-size: 1.2rem;
    `

    export const Content = styled.p`
        font-size: 0.8rem;
    `

Answer 1

你可以像下面那样做。

.grid {
  display:grid;
  grid-auto-flow:dense; /* dont forget this to fill all the tracks */
  grid-auto-rows:100px; /* the height of one row */
  grid-gap:5px;
}
.grid :nth-child(5n + 1),
.grid :nth-child(5n + 4) {
  grid-column:span 2; /* 1st and 4th need 2 columns */
}
.grid :nth-child(5n + 5) { 
  grid-area: span 2/4; /* 5th at column 4 taking 2 rows */
}
.grid :nth-child(5n + 3) {
  grid-column: 1; /* 3rd at column 1 */
}

/**/
.grid {
  max-width:600px;
  margin:auto;
  counter-reset:num;
}
.grid *{
  border:2px solid;
  font-size:30px;
  box-sizing:border-box;
  font-family:sans-serif;
  display:grid;
  place-content:center;
}
.grid *:before {
  content:counter(num);
  counter-increment:num;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS 动态网格图案

CSS dynamic grid pattern

css

grid

design-patterns

reactjs