Задать grid-row-gap равный grid-column-gap при justify-content: space-between;

Question

Возможно ли в данном примере расстояние между блоками по вертикали приравнять к расстоянию по горизонтали используя только css?

Количество блоков заранее неизвестно и поэтому задать высоту контейнеру не выход.

:root {
  --w: 20px;
}

div {
  background-color: tan;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(4, var(--w));
  justify-content: space-between;
 
  grid-row-gap: 1rem; /* ! */
}

i {
  border: 1px solid red;
  display: block;
  width: var(--w);
  height: var(--w);
  background-color: green;
}

<div>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

Answer 1

Распределяем по высоте также, как и по ширине, но уже свойством align-content: space-between;.

Но, чтобы распределение получилось, нужно чтобы было, где развернуться, а у Вас высота не указана и контейнер поджимает блоки.

:root { --w: 20px; }

body { margin: 0; }

div {
  background-color: tan;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(4, var(--w));
  justify-content: space-between;
  align-content: space-between;
  height: 100vw;
}

i {
  border: 1px solid red;
  display: block;
  width: var(--w);
  height: var(--w);
  background-color: green;
}

<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

Если количество блоков неизвестно, то отказываемся от justify-content и управляем отступами с помощью grid-gap, вычисляя значения через calc(). Сразу оговорюсь, что вариант ниже не идеален, даже с корректирующим @media-запросом.

:root { --w: 20px; }

body { margin: 0; }

div {
  display: grid;
  grid-template-columns: repeat(4, var(--w));
  grid-gap: calc((100vw - (4 * var(--w)) - 2rem) / 3);
  padding: 1rem;
  background-color: tan;
}
@media (orientation: landscape) {
  div { grid-gap: calc((100vw - (4 * var(--w)) - 3rem) / 3); }
}

i {
  display: block;
  width: var(--w);
  height: var(--w);
  border: 1px solid red;
  box-sizing: border-box;
  background-color: green;
}

<div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

В общем, если нужно именно такое поведение, как в вопросе, то без JS никак :( Всё портит вертикальный скролл, появление которого и нужно отлавливать скриптом.

БЛОГ НА HUSL

Задать grid-row-gap равный grid-column-gap при justify-content: space-between;

Ответы (1 шт):