参考重复命名的CSS网格行

Question

TLDR;此方法有效，但是要添加另一个人及其答案，我必须再添加4个第n个子选择器并指定特定的grid-row-start。我想要一个even选择器和一个odd选择器，该选择器可以处理任意数量的行。如果需要，我可以更改html。

我有一个网格，显示一个人的名字，他们的图像和一段正文。第一行应在右侧显示名称和图像。左侧第二行。并应交替显示每一行，如此代码段所示。

每个第4个第n个子选择器可处理一个人。对于列出的每个人，我都必须编写另外4个第n个子选择器。我想使它动态化，以便可以编写一个evens子选择器和一个odds子选择器...

我尝试使用命名行，但是第三人称移动到前两行，而不是进入下一个行。

我可以以可重复的方式使用命名行，还是以其他方式使行数完全动态？

我当前的解决方案是仅列出... 60个第n个子选择器，最多可覆盖15个人，并且...以这种方式使我的CSS肿。或者将grid-row-start直接放在html元素上（我可以在服务器上执行此操作，但我不想这样做）

.CandidateAnswers {
    display:grid;
    grid-template-columns: 1fr 5fr;
    grid-template-areas: 
        "name blank rev_name"
        "image description rev_image";
    justify-items:center;
    /*grid-template-rows:
        repeat(20,
            [row-name] auto
            [row-detail] auto
            [row-name-rev] auto
            [row-detail-rev] auto
        );*/
}


.CandidateAnswers *:nth-child(1){
    grid-column-start: 3;
    grid-row-start: 1;
}
.CandidateAnswers *:nth-child(2){
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 1;
}
.CandidateAnswers *:nth-child(3){
    grid-column-start: 3;
    grid-row-start: 2;
}
.CandidateAnswers *:nth-child(4){
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 2;
}

.CandidateAnswers *:nth-child(5){
    grid-column-start: 1;
    grid-row-start: 3;
}
.CandidateAnswers *:nth-child(6){
    grid-column-start: 2;
    grid-column-end: span 2;
    grid-row-start: 3;
}
.CandidateAnswers *:nth-child(7){
    grid-column-start: 1;
    grid-row-start: 4;
}
.CandidateAnswers *:nth-child(8){
    grid-column-start: 2;
    grid-column-end: span 2;
    grid-row-start: 4;
}
.CandidateAnswers *:nth-child(9){
    grid-column-start: 3;
    grid-row-start: 5;
}
.CandidateAnswers *:nth-child(10){
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 5;
}
.CandidateAnswers *:nth-child(11){
    grid-column-start: 3;
    grid-row-start: 6;
}
.CandidateAnswers *:nth-child(12){
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 6;
}

<div class="CandidateAnswers">
    <h3>Person 1</h3>
    <span></span>
    <img src="https://i.stack.imgur.com/j1mHu.jpg" alt="Person 1">
    <p>Lorem ipsum dolor &amp; stuff blah blah blah blah blah blah blah</p>
    
    <h3>Person 2</h3>
    <span></span>
    <img src="https://i.stack.imgur.com/j1mHu.jpg" alt="person 2">
    <p>I'm a person who does persony things and I'm a people and who knows maybe we'll one day be friends</p>
    
    <h3>Person 3</h3>
    <span></span>
    <img src="https://i.stack.imgur.com/j1mHu.jpg" alt="Person 3">
    <p>I also am here</p>
</div>

Answer 1

我保留了相同的html，添加了grid-auto-flow:column;，删除了grid-row-start，并删除了命名区域。

然后，由于mdn的nth-child，我的nth-child docs选择器正确了>

.CandidateAnswers {
    display:grid;
    justify-items:center;
    grid-auto-flow: column;
}

.CandidateAnswers *:nth-child(8n-3){
    grid-column-start: 3;
}
.CandidateAnswers *:nth-child(8n-2){
    grid-column-start: 1;
    grid-column-end: span 2;
}
.CandidateAnswers *:nth-child(8n-1){
    grid-column-start: 3;
}
.CandidateAnswers *:nth-child(8n){
    grid-column-start: 1;
    grid-column-end: span 2;
}

.CandidateAnswers *:nth-child(8n+1){
    grid-column-start: 1;
}
.CandidateAnswers *:nth-child(8n+2){
    grid-column-start: 2;
    grid-column-end: span 2;
}
.CandidateAnswers *:nth-child(8n+3){
    grid-column-start: 1;
}
.CandidateAnswers *:nth-child(8n+4){
    grid-column-start: 2;
    grid-column-end: span 2;
}

Answer 2

您可以像下面那样优化代码：