Как зафиксировать ширину колонки grid элемента?

Question

[Сергей]

Для ширины grid элементов свойство задается статично внутри обертки например:

display: grid;
  grid-template-columns: 100fr;

т.е с помощью свойства grid-template-columns мы статично определяем сколько будет колонок их размеры и тд.
необходимо чтобы это было динамически в зависимости от ширины блока. Блоки могут быть разные по ширине.

Comments

[Сергей delphinpro]

Кто-то что-то понял?

Сергей, в вашем коде всего одна колонка. Как она должна фиксироваться? Куда переноситься? Опишите подробнее, приложите макеты или схематичные рисунки как должно быть.

[Сергей]

Сергей delphinpro, Суть в том, что пилится ui-компонент. Необходимо сделать сетку. Ширина блоков может быть разная, будто баннер или карточка(например). Сетка должна принимать разные по ширине блоки и если блок не влазиет по ширине экрана, переносится на новую строку.

т.е с помощью свойства grid-template-columns мы статично определяем сколько будет колонок их размеры и тд.
необходимо чтобы это было динамически в зависимости от ширины блока.

Answer 1

[Pavel-ww]

Ну во-первых fr это не статично, а динамично. И 100fr в контексте вашего примера - это не верно. В контексте вашего примера должно быть grid-template-columns: 1fr;, что задает одну колонку. Если вам нужно 100 колонок то это будет так grid-template-columns: repeat(100, 1fr);. fr=фракция, то есть часть grid контейнера.
Ну а что касается авто переноса, то код будет такой (при условии что минимальная ширина колонки например 150px. подставьте ваше значение)

.block-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
}

Разные размеры задаются путем назначения начальной и конечной колонки/строки расположения.
Например:

.grid__item {
	 grid-column: 1/3; 
}

В этом случае блок к которому вы обращаетесь будет занимать две колонки

Comments

[Сергей]

Ну опять же, мы статично задаем кол-во колонок. А что если блок по ширине должен быть больше? Его необходимо переносить уже на новую строку.

[Pavel-ww]

Вот вам шпаргалка https://fls.guru/grid.html