使用css网格均匀分布的图像

Posted

技术标签:

【中文标题】使用css网格均匀分布的图像【英文标题】:Evenly spaced images using css grid 【发布时间】:2020-08-06 00:35:44 【问题描述】:

我需要一个响应式 CSS 网格,最多包含三列和至少一列,以便在每列周围有相等的空间。这很容易完成,只需一行,使用 flexbox 和justify-content: space-evenly,如下所示:

Even Spacing Using FlexBox

但我需要多行。 那么如何使用 css 网格获得均匀的列间距?

这是我目前使用的网格。最左边和最右边的边距是内边距的一半

No Even Spacing With Grid

我曾考虑为网格中的每一行使用一个弹性框,但这个想法听起来可能比它的价值更多。谢谢

JSFiddle

【问题讨论】:

您的代码在哪里,人们需要能够盲目地复制粘贴您的代码并看到与您完全相同的问题 明白了。正在努力... Space-evenly 似乎在 JSFiddle 中不起作用。我似乎无法更改 justify-content。我在那里做错了吗? 【参考方案1】:

图像之间的垂直和水平间距相等

图像不是 grid/flex 容器的直接子级,因此需要进行一些调整以使图像占据其父级的全宽/高度。

* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;


img 
  /* at least fill the parent */
  min-width: 100%;
  /* don't exceed the parent */
  max-width: 100%;


a,[item] 
  display: inline-block;



/* Not needed */

body * 
  padding: 10px;
  border: 1px solid;
<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

CSS 网格

使用css网格应该很容易每行有3个项目并且周围有均匀的空间。

* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;


img 
  min-width: 100%;
  max-width: 100%;


a,[item] 
  display: inline-block;


/* Solution */
[container] 
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:20px; /* even spacing using grid-gap, You can use percentage values if you want*/
    padding:20px;



[item]
    padding: 10px;
    background:red;



/* Not needed */

body * 
  padding: 10px;
  border: 1px solid;
<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

弹性盒

棘手需要一点小心

首先我们每行需要 3 个项目,我们可以说就像 css 网格一样,所以我们计算,我们给每个项目提供父级总宽度的三分之一flex-basis:calc(100% / 3);

其次,我们使用边距添加空间,例如margin:20px,现在棘手的一点是边距会增加项目的宽度,因此我们需要从容器的总宽度中减去该空间,然后计算第三个将成为flex-basis(100% - (20px * 6)) / 3);

6 因为每个元素将有 2 个左右边距 2 x 3=6

* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;


img 
  min-width: 100%;
  max-width: 100%;


a,[item] 
  display: inline-block;


/* Solution */
[container] 
    width: 100%;
    display: flex;
    flex-wrap:wrap;
   



[item]
    padding: 10px;
    background:red;
    flex:0 0 calc((100% - (20px * 6)) / 3);
    margin:20px; 



/* Not needed */

body * 
  padding: 10px;
  border: 1px solid;
<div container>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
  <div item>
    <a>
      <img src="https://via.placeholder.com/305x200">
      <p>Some Text</p>
    </a>
  </div>
</div>

【讨论】:

所以看css网格示例,图像看起来不均匀。最右边和最左边的边距是红色 div 之间边距的一半。您的 flexbox 示例是均匀分布的。我希望为此使用网格,但如果无法完成,我可以尝试使用弹性框。不管怎样,谢谢 Zohir 是的,可以使用父级上的填充来修复,更新! 是的,已将 padding: 3vw; gap: 3vw 添加到网格容器中,这似乎可以解决问题

以上是关于使用css网格均匀分布的图像的主要内容,如果未能解决你的问题,请参考以下文章

css 使所有不同大小的图像在网格中均匀缩放

图标,它们在网格中均匀分布

水平/垂直均匀分布网格单元?

尝试以编程方式均匀分布网格布局

具有均匀垂直和水平空间的引导网格

3.1.2 QGridLayout网格布局