Summary; This method currently works, but it requires adding multiple nth-child selectors for each new person and their answer. I am seeking a solution that can dynamically handle any number of rows using an even and odd selector to simplify the process.
The grid layout displays a person's name, image, and text. The layout alternates between showing the name and image on the right side in one row, then switching to the left side in the next row, as demonstrated in the code snippet below.
Currently, every 4th nth-child selector is responsible for styling each person. To automate this process, I would like to have dynamic evens and odds child selectors...
I attempted using named-rows, however, the third person ends up displacing the first two individuals instead of occupying the correct row position.
Is there a way to utilize named rows in a repeatable manner or achieve completely dynamic row management?
My current workaround involves manually listing over 60 nth-child selectors to accommodate up to 15 persons, resulting in bloated CSS. Alternatively, I could add the grid-row-start attribute directly to the HTML elements (which is feasible server-side but not preferred).
.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.sstatic.net/j1mHu.jpg" alt="Person 1">
<p>Lorem ipsum dolor & stuff blah blah blah blah blah blah blah</p>
<h3>Person 2</h3>
<span></span>
<img src="https://i.sstatic.net/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.sstatic.net/j1mHu.jpg" alt="Person 3">
<p>I also am here</p>
</div>