将包装物品放在网格的中心

问题描述

我有一个CSS Grid layout，如下所示：

这对我来说非常合适，但是当我降低屏幕分辨率时，网格的响应速度使网格看起来像这样：

相反，我希望包装物料使左右空白对齐，并且它们应如下所示：

如何实现以上目标？这些项目是动态的。可能会有偶数个项目，这将使它看起来更好，因为左右空白之间的距离将相等。但是，如果项目的数量为奇数，则空白区域仍应均匀分布。我尝试使用grid-auto-flow和align-items，但它们似乎没有帮助。

.accordioninnergrid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}

.innerbox {
  display: flex;
  border: 1px solid black;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word;
  width: auto;
}

.innerbox>p,img {
  margin: 1%;
}

<div class="accordioninnergrid">
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
</div>

解决方法

这是网格或Flex的有问题的布局。两者都没有简单的解决方案。

---

使用网格，无法自动将项目放置在中间列中。网格如何知道需要将网格项放置在第3、4和5列中，以便它们居中显示？

更糟，如果只有四列和一项居中，该怎么办？该项目必须跨越第2列和第3列。

没有网格功能可以自动执行此操作。它必须是作者定义的。

---

使用Flex ，上述问题不存在。但是需要权衡。 Flex有一个Grid没有的问题。

它源于这段代码：

.accordioninnergrid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}

grid-template-columns规则说每一列的最小宽度可以为240px，最大宽度为1fr（即所有可用空间）。

在flex中，代替fr函数使用的属性为flex-grow。

但是，由于在flex容器中没有任何列轨道阻碍跨行移动，因此flex-grow可以自由地在整个行中扩展项目。

简而言之，flex-grow和居中不能并存。

如果flex-grow被删除，那么使用flex居中就不会有问题。但是，当然，还有一个折衷方案：您将失去对可用空间功能的使用：

.accordioninnergrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.innerbox {
  flex: 1 0 140px; /* fg,fs,fb -- try fg: 0 */
  display: flex;
  border: 1px solid black;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word;
}

.innerbox > p,img {
  margin: 1%;
}

<div class="accordioninnergrid">
  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
</div>

---

更多详细信息在这里：

• Aligning grid items across the entire row/column (like flex items can)
• Targeting flex items on the last or specific row