css - 使最后一个网格单元格处于非事件状态

Question

我有一个用 ReactJS 制作的 4 列网格。网格包含一定数量的带有图片和文本的元素。如果填充了五个元素，则最后三个需要处于非事件状态，因此每行始终有四列，周围没有空白。最后一个单元格(最多 3 个)应始终处于非事件状态。没有悬停，没有焦点，只有一个空元素。网格元素是从硬编码的 JSON 中获取的。目前我的最后一个单元格只是 {[name: '', img: ''}]

我是 ReactJS 的新手，无法提出解决方案或在 stackoverflow 中找到解决方案。指出正确的方向将不胜感激。

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

};

预期输出:
[img] [img] [img] [img]
[img] [null] [null] [null]

Answer 1

这更像是一个 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>