Блог

Главная - Вопросы по программированию - Динамические строки и столбцы CSS-сетки

Динамические строки и столбцы CSS-сетки

#html #css #html-table #css-grid

#HTML #css #html-таблица #css-grid

Вопрос:

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

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

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

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

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

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

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

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

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

Комментарии:

1. ваш попытавшийся код был бы полезен.

2. Вы всегда устанавливаете для них ширину 145 пикселей. Вы также можете задать динамическую ширину следующим образом: grid-template-columns: repeat(auto-fill, minmax(145px, 1fr))

3. CSS-Grid не является заменой таблиц. я предлагаю вам использовать правильный инструмент для работы.

4. Если вы хотите сделать таблицу динамической, вам нужно использовать таблицы, а не css grid

Ответ №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>