如何简化支持无限div的重复grid-area网格布局？

问题分析 #

当前布局通过给每个div单独设置grid-area定位，无法支持动态添加的无限数量div。我们可以分析布局的循环规律，结合nth-child和grid-row/column span实现自动适配的布局。

观察布局可知，每4个div为一个重复单元，每个单元占据3行2列：

• 第1个div：占1行1列（左上方）
• 第2个div：占2行1列（右上方）
• 第3个div：占1行1列（右下方）
• 第4个div：占2行1列（左下方）

修改后的代码 #

HTML

<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <!-- 可继续添加更多div，布局将自动适配 -->
</div>

CSS

.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0; /* 替代旧版的grid-column/row-gap */
    background: #FFF;
}

.parent div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    border: 1px solid red;
}

/* 每组第1个元素（4n+1）：占1行1列 */
.parent div:nth-child(4n+1) {
    grid-row: span 1;
    grid-column: 1;
}

/* 每组第2个元素（4n+2）：占2行1列 */
.parent div:nth-child(4n+2) {
    grid-row: span 2;
    grid-column: 2;
}

/* 每组第3个元素（4n+3）：占1行1列 */
.parent div:nth-child(4n+3) {
    grid-row: span 1;
    grid-column: 2;
}

/* 每组第4个元素（4n+4）：占2行1列 */
.parent div:nth-child(4n+4) {
    grid-row: span 2;
    grid-column: 1;
}

说明 #

1. 移除了每个div的单独类名，新增元素无需额外编写CSS
2. 父元素不再固定grid-template-rows，grid会根据子元素的span自动计算行高
3. 使用gap替代旧版的间隙属性，符合现代CSS语法
4. 通过nth-child(4n+x)的公式匹配循环单元内的元素，实现无限扩展的布局

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