Как жестко задать размер колонок в grid таблице с неизвестным числом колонок?

Question

[Santos2004]

От предшественника достался код в css, описывающий поведение талицы.

.CardApplication {
  min-width: 1631px;
  padding-left: 17px;
  padding-right: 17px;
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  font-size: 13px;
}

т. е хочешь еще столбец кидаешь вот сюда скажем 1fr:

grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

1. как избавиться от хардкодинга при добавлении колонок?
2. как выставить постоянную ширину колонок?

Comments

[godsplane]

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

[Михаил Р.]

godsplane, только у него там 2fr встречается

[Santos2004]

godsplane, хард код. я буду добавлять количество столбцов. сколько не знаю. в принцепе как вариант конечно работать будет.

[Santos2004]

Михаил Р., именно, это описание проблемы т.е. "много букв". ) В принцепе все работает. ) но ад перфекциониста

[Михаил Р.]

Santos2004, опишите, какую именно проблему Вы решаете? Возможно, есть более простое решение

[FeST1VaL]

Покажите макет, может реально есть проще вариант... как будто вы делаете слайд в право с каким то кол-вом блоков... тк min-width огромный...

[Wispik]

Santos2004,

От предшественника достался код

Первое правило программиста, работает не трожь

1. как избавиться от хардкодинга при добавлении колонок?

никак, в грид нельзя задать динамическое число колонок
как вариант можно несколько классов создать и применять их к нужным таблицам(это если я правильно понял проблему)

2. как выставить постоянную ширину колонок?

вместо 1fr написать количество пикселей

ад перфекциониста

нет, это называется поиск проблем, из-за зуда в одном месте

[Ankhena]

grid-auto-flow: column;
grid-auto-columns: 40px;

Ширину можете задать самим ячейкам.

Но если у вас там таблица и есть второй ряд, то это всё не сработает. Потому что он же не поймет, когда вам хватит в ряду.

[Ankhena]

Wispik,

никак, в грид нельзя задать динамическое число колонок

С чего бы это?

[Wispik]

Ankhena, неправильно выразился. Я имел ввиду в его случае, когда ширина колонок разная

[Santos2004]

попробую ответить сразу всем

Wispik,

нет, это называется поиск проблем, из-за зуда в одном месте

каждый думает о вещах в меру своей испорченности))) просто не люблю несколько вещей при программировании. Хардкод один из них. Тем более скопированный моим предшественником у того кто был до него. Учитывая что человек знал о расширении. И о том, что fr прекрасен но это доля от целого. и чем больше колонок тем они уже. что нехорошо. тем более что горизонтальная прокрутка всей таблицы допустима. Тем более решение то есть.
как вариант вот:

.grid-container {
    display: grid;
    grid-gap: 10px; 
    grid-template-columns:  repeat(auto-fill, 1fr);
    grid-auto-flow: column;
}
.item {
    width: 250px;
}
.item2 {
    width: 500px;
}

и далее

<div class='grid-container'>
    <div class="item">1</div>
    <div class="item2">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>

спасибо всем!
получилось

Answer 1

[Сергей delphinpro]

Используя функцию repeat() и пользовательские свойства, можно задавать кол-во колонок в разметке, без хардкодинга в css. Не совсем то, что вам нужно, но кол-во ячеек, как правило известно при выводе информации, и серверный код вполне может проставить нужно значение.