Может ли grid автоматически растянуть по ширине не влезающий элемент (как flex-grow при wrap)?

Ссылка скопирована
CSS CSS Grid Flexbox
1 ответ

Всем привет. У меня есть grid блок в котором 3 дочерних блока. Родитель имеет следующий код:

.base-box { 	display: grid; 	grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); 	grid-auto-rows: auto; 	max-width: 1200px; 	overflow: hidden; 	border-radius: 20px; }

.base-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); grid-auto-rows: auto; max-width: 1200px; overflow: hidden; border-radius: 20px; }

Что я хочу сделать: при сжимании экрана самый правый блок (темно-зеленый) автоматически перелетает на 2 ряд, но занимает при этом только 1 ячейку. Можно ли сделать так, чтобы без дополнительных media правил он автоматически растягивался на 2 ячейки как если бы это было при flex? P.S. - Я просто хочу хорошо научиться работать и понимать grid и по этому пробую всякое.

Может ли grid автоматически растянуть по ширине не влезающий элемент (как flex-grow при wrap)?

Дополнительно:

Без auto-fill можно и без media. С помощью вот этой чудесной статьи https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Но я не уверена, что дизайнеру понравится решение с растянутой строкой (но это уже не о гридах)

  • Ankhena, привет.) Я прочитал статью, но не понял как она может помочь в данном случае. Да и мне интересно - можно ли это реализовать по средствам самого grid. Пока я не знаю как это сделать без использования media тегов.(
  • Михаил Оловянников,

    но не понял как она может помочь в данном случае

    В данном случае, при наличии auto-fill, никак.

  • Ankhena, просто я когда делал это, то предполагал, что таких карточек может быть неизвестное количество. А без auto-fill как вы бы сделали?
  • Михаил Оловянников, с известным количеством колонок я бы использовала прием как в статье.
  • Ankhena, то есть через nth? Но все равно не понимаю. Какое отношение nth имеет к изменению размера экрана.? Если количество колонок будет известно (например 3 на 3), то макет будет статичным и последний блок без дополнительных правил вообще переноситься на второй ряд не будет.
  • Михаил Оловянников, если колонок будет точно 3 и элементов тоже 3, то не ясно в чем вообще вопрос.

    Если колонок фиксированное количество, а элементов неизвестно сколько и нужно навести порядок в последнем ряду, то поможет nth-, :not и вся та история из статьи.

  • Ankhena, колонок 3 и элементов 3. Но элементы имеют минимальную ширину — например 300 пикселей. Элементы занимают 900 пикселей. Если я буду сжимать экран до 700 пикселей по ширине например, то мне нужно чтобы последний элемент перепрыгнул на 2 ряд и стал шириной в 600 пикселей. Даже перепрыгивание невозможно сделать без auto-fill не прибегая к media выражениям. Простите, я наверное вам задурил голову.)
    Вот пример как это должно работать, только на grid: https://study-projects.netlify.app/3columns/
  • Михаил Оловянников, ещё раз: если число колонок неизвестно, то грид не поможет (без js и media)
  • Ankhena, спасибо за помощь и терпение.)

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Никита Орлов Ответ

    Да, grid может автоматически растянуть по ширине не влезающий элемент, как это делает flex-grow при wrap. Для этого можно использовать свойство grid-template-columns и значение minmax().

    Пример использования:

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

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

    В данном примере мы создаем сетку с помощью grid с указанием grid-template-columns. Свойство repeat(auto-fit, minmax(200px, 1fr)) означает, что элементы будут автоматически растягиваться по ширине и при этом не будут меньше 200px. Таким образом, если элемент не влезает в одну колонку, он будет автоматически перенесен на следующую строку и растянут на всю доступную ширину.

    Этот подход позволяет создать адаптивную и гибкую сетку, которая будет подстраиваться под содержимое и растягивать элементы по ширине при необходимости.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ