Making the last grid cell(s) inactive - css

Question

I have a 4 column grid made with ReactJS. The grid contains a certain number of elements with pictures and text on them. If there's five elements filled, the last three need to be inactive, so there's always four columns on every row, no empty space lying around.
The last cell(s) (max 3.) should always be inactive. No hover, no focus, just an empty element.
The grid elements are fetched from a hardcoded JSON. At the moment my last cell is just {[name: '', img: ''}]
Im fairly new to ReactJS and can't come up with a solution or find one in stackoverflow. Pointing in the right direction would be appreciated.
const GridItem = ({ name, path, altText }) => {
return (
<li className={'grid-item'} key={name}>
<a className={'link'}>
<div className={'image'}>
<img src={path} alt={altText} />
</div>
<div className={'image-text'}>{name}</div>
</a>
</li>
);
};
Expected output:
[img] [img] [img] [img]
[img] [null] [null] [null]

Answer 1

This is more like a css question, and there're a lot of ways to achieve this.
I recommend to use display: grid and grid-template-columns to make grid-based layouts:
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
.grid img {
width: 100%;
}
<div class="grid">
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
</div>
You don't have to create fake cells, but if you really want, you can just add some simple css to hide them:
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
.grid img {
width: 100%;
}
.grid img[src=""] {
display: none;
}
<div class="grid">
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
<img src="https://picsum.photos/200/200" />
<img src="" />
<img src="" />
<img src="" />
</div>
Update
You can change your code like this, if the name is empty, give this cell some hint, so you can style it easily:
const GridItem = ({ name, path, altText }) => {
return (
<li className={'grid-item'} key={name}>
<a className={`${name ? 'link' : 'link link__empty'}`}>
<div className={'image'}>
<img src={path} alt={altText} />
</div>
<div className={'image-text'}>{name}</div>
</a>
</li>
);
Or just don't populate its contents at all:
const GridItem = ({ name, path, altText }) => {
return (
<li className={'grid-item'} key={name}>
<a className={'link'}>
(name &&
<React.Fragment>
<div className={'image'}>
<img src={path} alt={altText} />
</div>
<div className={'image-text'}>{name}</div>
</React.Fragment>)
</a>
</li>
);
The result should be like this:
* {
box-sizing: border-box;
}
.grid {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.grid-item {
/* exclude the border, make it 4 columned grid */
flex: 0 1 calc(25% - 2px);
/* the border is 1px, so the equation above is minus 2px*/
border: solid #000 1px;
}
.link {
text-decoration: none;
}
.image {
width: 100%;
}
.image-text {
text-align: center;
}
.link__empty *{
/* if it's empty, do not display any of it's children */
display: none;
}
<ul class="grid">
<li class="grid-item">
<a class="link" href="javascript: void(0)">
<img class="image" src="https://picsum.photos/200/200" alt="image" />
<div class="image-text">image</div>
</a>
</li>
<li class="grid-item">
<a class="link" href="javascript: void(0)">
<img class="image" src="https://picsum.photos/200/200" alt="image" />
<div class="image-text">image</div>
</a>
</li>
<li class="grid-item">
<a class="link" href="javascript: void(0)">
<img class="image" src="https://picsum.photos/200/200" alt="image" />
<div class="image-text">image</div>
</a>
</li>
<li class="grid-item">
<a class="link" href="javascript: void(0)">
<img class="image" src="https://picsum.photos/200/200" alt="image" />
<div class="image-text">image</div>
</a>
</li>
<li class="grid-item">
<a class="link" href="javascript: void(0)">
<img class="image" src="https://picsum.photos/200/200" alt="image" />
<div class="image-text">image</div>
</a>
</li>
<li class="grid-item">
<a class="link link__empty" href="javascript: void(0)">
<img class="image" src="" alt="" />
<div class="image-text"></div>
</a>
</li>
<li class="grid-item">
<a class="link link__empty" href="javascript: void(0)">
<img class="image" src="" alt="" />
<div class="image-text"></div>
</a>
</li>
<li class="grid-item">
<a class="link link__empty" href="javascript: void(0)">
<img class="image" src="" alt="" />
<div class="image-text"></div>
</a>
</li>
</ul>