Взаимодействие со строками из сетки, которая использует repeat () - PullRequest
Новая
       1

Взаимодействие со строками из сетки, которая использует repeat ()

2 голосов
/ 06 марта 2019

У меня есть сетка, которую я сейчас генерирую с использованием следующего CSS: 

.tp-grid {
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-gap: 15px;
align-items: center;
}

В HTML я генерирую что-то, что может выглядеть следующим образом: 

<div class="tp-grid">
    <div>Alex</div>
    <div>19</div>
    <div>Male</div>
    <div>Programmer</div>
    <div>Honda Civic</div>
    <div>American</div>
    <div>Brown Hair</div>
    <div>Blue Eyes</div>
    <div>$50k/yr</div>
    <div>Married</div>
    <div>3 kids</div>
</div>

Благодаря CSS вся эта информация отображается в одной строке сетки.Однако, если бы я хотел две строки, HTML-код мог бы выглядеть примерно так: 

<div class="tp-grid">
    <div>Alex</div>
    <div>19</div>
    <div>Male</div>
    <div>Programmer</div>
    <div>Honda Civic</div>
    <div>American</div>
    <div>Brown Hair</div>
    <div>Blue Eyes</div>
    <div>$50k/yr</div>
    <div>Married</div>
    <div>3 kids</div>
    <div>Ashley</div>
    <div>21</div>
    <div>Female</div>
    <div>DevOps</div>
    <div>Honda Accord</div>
    <div>Swedish</div>
    <div>Blonde Hair</div>
    <div>Gray Eyes</div>
    <div>$55k/yr</div>
    <div>Single</div>
    <div>0 kids</div>
</div>

Возможно ли применить действие только к определенной строке при использовании repeat () в CSS?Прямо сейчас я пытаюсь удалить одну строку, если мой вопрос слишком широкий.

1 Ответ

0 голосов
/ 07 марта 2019

Возможно, вы сможете использовать селектор: nth-child () в css: 

div.tp-grid div:nth-child(n+12):nth-child(-n+22){
    display:none;
}

Проверьте эту ссылку для получения дополнительной информации об освоении: nth-child http://nthmaster.com/

...