2

I've got a grid which I currently generate using the following CSS:

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

In the HTML, I generate something which might look like the following example:

<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>

Thanks to the CSS, all of this information is displayed in a single grid row. If I wanted two rows, however, the HTML might look something like this:

<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>

Is it possible to apply an action to only a specific row when using repeat() in the CSS? Right now I'm looking to remove a single row, in case my question is too broad.

Kulahan
  • 512
  • 1
  • 9
  • 23
  • 1
    If by "apply an action" you mean "target a specific row with css selector", then unfortunately this is not possible, see [this link](https://stackoverflow.com/questions/46308048/how-to-target-a-specific-column-or-row-in-css-grid-layout) – Piotr Wicijowski Mar 06 '19 at 20:41

1 Answers1

0

You might be able to use the :nth-child() selector in css:

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

Check out this link for more info on Mastering the :nth-child http://nthmaster.com/

Bedir
  • 476
  • 1
  • 6
  • 17