使用css网格均匀地排列图片

Question

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

使用FlexBox的均匀间距

但是我需要多行。那么如何用css网格让列距均匀呢？

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

栅格无均匀间距

我曾想过在网格中的每一行都使用flexbox，但这个想法听起来似乎是得不偿失。谢谢你的建议

JSFiddle

Answer 1

图片之间垂直和水平方向的空间相等

图片并不是gridflex容器的直接子代，所以需要做一些调整，使图片占据其父代的全部宽度和高度。

* {
  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>

---

Flexbox

棘手的需要一点小心

首先我们每行需要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>