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

#css #css-grid

#css #css-сетка

Вопрос:

Я пытаюсь автоматически переносить сетку с помощью автозаполнения, проблема в том, что я хочу, чтобы ширина столбца ot была максимальной шириной содержимого

Я пытаюсь это сделать, но это не работает:

  grid-template-columns: repeat(auto-fit,min-content);

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

1. нет, это невозможно с помощью CSS grid. это работа flexbox

2. Да, я подумал то же самое… Shame = Я должен использовать проценты, чтобы указывать количество столбцов вместо столбцов шаблона. Приветствия

3. просто что-то еще, что нужно попробовать (не тестировать, просто размышлять вслух) как насчет grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));

Ответ №1:

Попробуйте:

 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

Ответ №2:

Попробуйте функцию fit-content():

 .container{
    display: grid;  
    grid-template-columns: auto fit-content(800px) auto;
}

CSS-функция fit-content() преобразует заданный размер в доступный размер в соответствии с формулой min(максимальный размер, max(минимальный размер, аргумент)).

Больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content