Title: css every n-th img in new row
Tags: css;reactjs;css-selectors
Question: I have a react component and I would like to display inline-block 3 photos in a row with it's names under each photo, and every next 3 elements under (in new row) and so on...
I think I need to use something with```:nth-child(3n+1)``` but something goes wrong...
```const Photos=(props)=&gt;{
    return(
        <div className=&quot;photos-list&quot;&gt;
            <img className=&quot;photo-img&quot;
                src={props.memoriesPath}
                alt={props.memoriesName}
            /&gt;
            <div className=&quot;photo-name&quot;&gt;{props.memoriesName}</div&gt;
        </div&gt;
    )
}

export default Photos
```
Could you please tell me how should css look like?



Here is another answer: wrap all photos components in a div then style div with grid box like this:
```<div classname=&quot;parent&quot;&gt;
   <Photos /&gt;
   <Photos /&gt;
   <Photos /&gt;
</div&gt;
```
and css:
```.parent {
    display:grid;
    grid-template-columns:auto auto auto;
}
```

Comment for this answer: thx...that works!

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:03/05/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><reactjs><css-selectors>', 'Title': 'css every n-th img in new row', 'ViewCount': 33, 'id': 71364566, 'user_AboutMe': None, 'user_AccountId': 24463325.0, 'user_DisplayName': 'jBrand', 'user_Reputation': 1.0, 'user_Views': 1.0, 'user_id': 18384085.0}}