Как указать ширину и высоту для "1fr" в сетке CSS?

Question

У меня довольно сложный разбитый макет, которого я пытаюсь добиться с помощью сетки CSS, и вот код для моего макета столбцов и строк:

grid-template-columns: 8fr 1fr 3fr 8fr 1fr 5fr 2fr 6fr;
grid-template-rows: 1fr 7fr 1fr 1fr 7fr 1fr 1fr 2fr 1fr 4fr 1fr 3fr;

Каждый 1fr здесь должен быть 20px, и остальные масштабируются соответственно, например. 8fr будет 160px, 3fr будет 60px и т. Д.

Как определить ширину для каждого столбца и высоту для каждой строки при сохранении этого точного макета?

Answer 1

1fr - относительная единица. Это означает, что нужно взять одну часть того, что есть, и использовать это.

Если вы хотите фиксированной ширины, вы должны определить их:

grid-template-columns: 100px 20px 40px 100px ....
grid-template-rows: 100px 20px 40px ....

Answer 2

Возможно, вы ищете CSS переменные:

.grid {
  --fr: 20px;
  grid-template-columns: calc(8*var(--fr)) var(--fr) calc(3*var(--fr)) calc(8*var(--fr)) var(--fr) calc(5*var(--fr)) calc(2*var(--fr)) calc(6*var(--fr));
  grid-template-rows: var(--fr) calc(7*var(--fr)) var(--fr) var(--fr) calc(7*var(--fr)) var(--fr) var(--fr) calc(2*var(--fr)) var(--fr) calc(4*var(--fr)) var(--fr) calc(3*var(--fr));
}

Answer 3

grid-template-columns: repeat(3, 1fr)

3 - это количество столбцов, которое вы хотите, и 1fr - это интервал для каждого из них, вы, конечно, можете изменить эти числа, что изменит расположение, и то же самое относится к grid-template-rows:repeat (2, 1fr) et c .. .