Блог

Я использую CSS Grid для отображения таблицы записей. Каждый столбец определяется как «авто», потому что я бы хотел, чтобы ширина столбцов соответствовала содержимому.

В моем приложении у меня есть кнопка для получения следующей страницы результатов, и я динамически заполняю сетку со страницы 2 результатов. Это приводит к скачку сетки, потому что, конечно, содержимое каждого столбца на странице 2 не такое, как на странице 1. (Я заполняю таблицу с помощью Vue в цикле v-for.)

Есть ли какой-либо способ заморозить ширину столбцов после их первоначального заполнения?

Единственный метод, который я могу придумать, это использовать Javascript для получения ширины каждого столбца, а затем переписать значение CSS grid-template-columns , чтобы указать столбцы как фиксированную ширину. Это возможно, но похоже на ошибку.

Может быть, есть какая-то магия CSS, о которой я не знаю? Что-то position: sticky , но для ширины столбцов?