Ссылка повторяется с именем css строк сетки - PullRequest
Новая
       38

Ссылка повторяется с именем css строк сетки

0 голосов
/ 25 апреля 2020

TLDR; Это работает, но чтобы добавить другого человека и его ответ, я должен добавить еще 4 селектора n-го ребенка и указать конкретные grid-row-start s. Я хочу иметь селектор even и селектор odd, который обрабатывает любое количество строк. Я могу изменить html, если необходимо.

У меня есть сетка, которая показывает имя человека, его изображение и текст. Первый ряд должен показывать имя и изображение с правой стороны. 2-й ряд на левой стороне. И должен чередовать каждую строку, как показано в этом фрагменте кода.

Каждый селектор 4-го ребенка обрабатывает одного человека. Для каждого человека в списке я должен написать еще 4 селектора n-го ребенка. Я хотел бы сделать эту динамику c, чтобы я мог написать дочерний селектор evens и дочерний селектор odds ...

Я попытался использовать named-row, но затем третий человек перемещается вверх до первых двух строк, вместо того, чтобы идти в следующую именованную строку.

Могу ли я использовать именованные строки повторяющимся образом или иным образом сделать количество строк полностью динамическим c?

Мое текущее решение было бы просто перечислить, как ... 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>

Ответы [ 2 ]

1 голос
/ 25 апреля 2020

Я сохранил то же самое html, добавил grid-auto-flow:column;, удалил grid-row-start и удалил именованные области.

Затем я правильно установил мои nth-child селекторы, благодаря mdn's nth- детские документы 

.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;
}
0 голосов
/ 25 апреля 2020

Вы можете оптимизировать свой код, как показано ниже: 

.CandidateAnswers {
    display:grid;
    grid-auto-flow:dense;
    grid-auto-columns:1fr; /* make all columns equal */
}

h3 {
  grid-column:span 4;  /* this will create 4 columns */
  width:25%; /* take the width of only 1 column*/
  text-align:center;
}
p {
  grid-column:span 3; /* take 3 columns */
  width:66.66%;  /* take the width of only 2 column*/
}

h3:nth-child(6n + 1),
p:nth-child(6n + 3){
  margin-left:auto; /* push to the right  */
}

img {
  margin:auto;
}
img:nth-child(6n + 2){
   grid-column:4;
}
img:nth-child(6n + 5){
   grid-column:1;
}
<div class="CandidateAnswers">
    <h3>Person 1</h3>
    <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>
    <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>
    <img src="https://i.stack.imgur.com/j1mHu.jpg" alt="Person 3">
    <p>I also am here</p>
</div>
...