我有一个用ReactJS制作的4列网格。网格包含一定数量的元素,上面有图片和文字。如果有五个元素被填满,最后三个元素需要处于非活动状态,因此每行总是有四列,周围没有空白空间。最后一个单元格(最多 3 个(应始终处于非活动状态。没有悬停,没有焦点,只是一个空元素。网格元素是从硬编码的 JSON 中提取的。目前我的最后一个单元格只是{[名称:",img:"}]
我对 ReactJS 相当陌生,无法提出解决方案或在堆栈溢出中找到解决方案。指出正确的方向将不胜感激。
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>
);
};
预期产出:
[图片][图片][图片][图片]
[图片][空][空][空]
这更像是一个 css 问题,有很多方法可以实现这一点。
我建议使用display: grid
和grid-template-columns
来制作基于网格的布局:
.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>
您不必创建假单元格,但是如果您真的想要,只需添加一些简单的css来隐藏它们:
.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>
更新
您可以像这样更改代码,如果name
为空,请给此单元格一些提示,以便您可以轻松地设置其样式:
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>
);
或者根本不填充其内容:
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>
);
结果应该是这样的:
* {
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>