@justedoit

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

Для ширины grid элементов свойство задается статично внутри обертки например:
display: grid;
  grid-template-columns: 100fr;


т.е с помощью свойства grid-template-columns мы статично определяем сколько будет колонок их размеры и тд.
необходимо чтобы это было динамически в зависимости от ширины блока. Блоки могут быть разные по ширине.
  • Вопрос задан
  • 773 просмотра
Пригласить эксперта
Ответы на вопрос 1
Pavel-ww
@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; 
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы