CSS сетка динамических строк и столбцов

Question

Я хотел бы создать таблицу, используя сетку CSS Таблица находится в следующей (плохо прорисованной, но передает сообщение) форме:

Я объясню. Скажем, размер ячейки заголовка 2x / 2y. Ячейка каждой строки заголовка равна x / 2y, а ячейка каждого столбца заголовка равна 2x / y. Размер ячейки внутренней таблицы (красный) - х / у.

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

Как мне сделать эту таблицу динамичной?

Для заголовка колонки я написал:

  grid-template-rows: repeat(auto-fill, 145px);

и для строк заголовка, которые я добавил:

  grid-template-columns: repeat(auto-fill, 145px);

Но я все еще что-то упускаю. Как я могу сделать эту таблицу динамичной в соответствии с данными и теми ограничениями размера, которые я написал для каждой ячейки?

Answer 1

Хотя приведенное ниже не очень практично или полезно, хотя я решил попробовать из любопытства:

• x и y в вашем вопросе были сохранены как переменные CSS,
• используйте grid-template-columns аналогично тому, что вы сделали, но с добавлением ширины первого столбца, например grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x)),
• поместите первый ряд, используя grid-template-rows: calc(var(--y) * 2),
• поместите строки ниже заголовка , используя неявные сетки - используйте grid-auto-rows: var(--y).

См. Демо ниже:

:root {
  --y: 75px;
  --x: 75px;
}

.container {
  display: grid;
  grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x));
  grid-template-rows: calc(var(--y) * 2);
  grid-auto-rows: var(--y);
}

.container > div {
  border: 1px solid red;
}

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>