Равномерно расположенные изображения с использованием сетки css

Question

Мне нужна адаптивная сетка CSS, содержащая не более трех столбцов и не менее одного, чтобы иметь одинаковое пространство вокруг каждого столбца. Это легко сделать, используя всего одну строку, используя flexbox и justify-content: space-evenly, как показано здесь:

Равномерное расстояние с использованием FlexBox

Но мне нужно несколько строк. Так, как я могу получить даже интервал столбцов с css сеткой?

Вот то, что у меня есть в настоящее время с сеткой. Левые и правые поля в два раза меньше внутренних полей

Нет четного интервала с сеткой

Я думал об использовании flexbox для каждой строки в сетка, но идея звучит так, как будто это может быть больше работы, чем стоит. Спасибо

JSFiddle

Answer 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>

---

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>